1、在WXML文件中创建一个固定高度的区域,并设置其为可滚动的。
2、在该区域内添加两个元素:一个用于显示上下滑动的图片,另一个用于显示图标。
3、在CSS样式文件中,对这两个元素分别设置相应的位置和样式。其中,上下滑动的图片需要设置position:absolute。top:0。left:0。width:100%。height:auto。z-index:-1。等属性,使其能够覆盖住整个区域并与图标区分开来。而图姿轿配标元素则需要设置position:relative。等属性来保证其相对于父元素的位置不变。
4、使用JavaScript监听区域的滚动事件,获取当前滚动迹指位置,并将其赋值给图标元素的top属性,以实现图标随帆毕着滚动上下移动。
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件
touchend在触摸结束时触发事件
touchmove触摸的过程中不断激发这个事件
这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart =>touchmove=>touchmove =>··· =>touchmove =>touchend。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)