js效果页面往上滚

JavaScript014

js效果页面往上滚,第1张

可以根据滚动条y方向的值来设定第一城图片的top值

绑定 onscroll事件 ,当滚动轮滚动的时候去获取滚动轮相对于y方向的值(top值),将第一层的top值设定成和滚动的top值相等就可以了,第一层别忘记加 position:absolute

1进入:“金和IU APP自助工厂”官网,点击右上角的登入,登入注册的帐号以及密码.

2.登入主界面后>点击左侧的>应用管理>再点击右上角的>马上制作APP.

3.进入APP模版选择界面,选择需要的APP模版,这个可以根据需求定位做何种的APP,每一种模版都有他独特的展示优点.不管选择何种APP模版,大致的制作方法都是差不多的。

4.进入APP创建界面,输入需要创建的APP名称,APP图标,以及APP的描述.

①、AAP名称:一定需要在取名的时候定义想好,如果命名后就尽量不要去更改。

②、APP图标:这个图标可以选择企业或店面注册时候的商标,也尽量不要去更换(可以自定义)。

③、APP的描述:可以描述APP的用途,以及主要的作用等等.

填写完成后选择下一步.

5.选择程序启动图片,可以选择系统自带的图片(这个启动图片可以一个半个月到一个月更新一次)

6.也可以自定义图片,上传PS的个性图片,点击+号位置>上传界面>选择准备好的图片>打开

7.上传进去后,调整成合适大小的图片,点击保存.

8.上传进入后点击下一步.

9.选择APP界面皮肤>点击下一步.

10.等待生成APP.

11.等到100%时系统会自动挑战到下载界面,可以通过扫苗二微码或直接下载到手机体验,但是里面没有产品内容。

滴滴出行首页(快车),可以上拉下拉底部菜单(tableView),但又不影响后面地图的交互使用。

找来找去网上没有Demo,就想着自己做。

一开始思路错误,想给tableview加手势和惯性滑动,做来做去总是不完美,而且麻烦。放弃了!

先上GitHub: Demo  (1.2已修改上拉不完全问题:tableview的高度没有设置对)

Demo演示:

滴滴图:

首先你要懂一点 iOS 的响应链的东西,当手指触摸到屏幕后,这个触摸事件是怎么派发的。

(1)tableview其实是全屏,设置其contentInset使其下移,并设置背景色为透明。

(2)当手指触碰到屏幕时,其实是触碰在tableview上的;这里要判断手指第一下触碰在屏幕上的坐标,是在透明区域(地图)上还是tableview的不透明区域(cell)上。

(3)当在透明区域时,判断手势操作底层地图;当在tableview的不透明区域上,判断手势操作tableview。

不多说了,直接说做法。

1.创建一个继承UITableView的子类

2. 关键,在UITableView子类重写hitTest:withEvent:方法。

    2.1 关于这个方法的理解,看这里: hitTest:withEvent:方法流程 。(我也理解得不深)

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event{

    if(point.y<0) {

        return nil

    }

    return  [super hitTest:point withEvent:event]

}

    2.2 方法里的手指触碰点的坐标 point 在我测试过后,发现不是以屏幕左上点为原点的,而是相对于tableview的contentOffset的。这里说不太清楚,可以自己打印着看一下。

    tableview是不断滑动的,所以contentOffset也是不断改变的。

    因此,这里只要判断point的y值是正是负就可以确定手指第一下是触碰在地图上还是tableview上了。

    2.3 point.y<0时,说明手指触碰在地图上,返回nil,让其不会在tableview上触发操作。反之,则正常进行此方法。

3. 在VC的view中加入地图视图,以及UITableView子类的tableview,并设置tableview的contentInset使其下移。

注意:使tableview下移的contentInset和用来判断point.y的contentOffset不要搞混了。

GitHub: Demo  (1.2已修改上拉不完全问题:tableview的高度没有设置对)

参考文档: iOS之事件穿透

                   hitTest:withEvent:方法流程

                   [iOS开发]hitTest的一些使用(点击穿透)