想做一个全屏滚动的效果，于是在网上找了一个差不多的例子，但是觉得有些地方不是很好，于是改进了一下；

先给大家展示下效果图，感觉不错，请参考实例代码。

代码：

wxml:

！-第一页-视图id=' hook 1 ' class=' section section 01 { { scrollindex==0？active ' : ' ' } } ' style=' background : red ' bind touch start=' scroltouch start ' bind touch move=' scroltouch move ' bind touch end=' scroltouch hend ' view class=' cont ' view class=' cont-body ' view one/view/view！-第二页-视图id=' hook 2 ' class=' section section 02 { { scrollindex==1 '？active ' : ' ' } } ' style=' background : pink ' bind touch start=' scroltouch start ' bind touch move=' scroltouch move ' bind touch end=' scroltouch hend ' view class=' cont ' view class=' cont-body ' view two/view/view！-第三页-视图id=' hook 3 ' class=' section section 03 { { scrollindex==2 '？active ' : ' ' } } ' style=' background : blue ' bind touch start=' scroltouch start ' bind touch move=' scroltouch move ' bind touch end=' scroltouch hend ' view class=' cont ' view class=' cont-body ' view three/view/view！-第四页-视图id=' hook 4 ' class=' section section 04 { { scrollindex==3 '？active ' : ' ' } } ' style=' background : green ' bindtuchstart=' scroltouchstart ' bindtuchmov=' scroltouchmove ' bindtuchend=' scroltouchend ' view class=' cont ' view class=' cont-body ' view foure/view/view wxss 3360

页面{身高： 100%；背景fffcolor: # 282828}。容器{ flex : 1；弯曲方向：柱；盒子尺寸：边框盒子；padd : 0；align-项目：初始；证明-content:第一个基线；}.容器填充{身高： 100%；飞越：隐藏；}.滚动-整页{身高： 100%；}.截面{身高： 100%；}.cont { width : 100%；高度： 100%;margin: 0自动相对位置：}.内容cont-body {宽度：75%；绝对位置：左侧： 50%;前：名50%；transform: translate(-50%，-50%)；}js:

页面({ /** *页面的初始数据*/data: { scrollindex: 0，//当前页面的索引值totalnum: 4，//总共页面数starty: 0，//开始的位置x startTime: 0，//开始的时间戳endy: 0，//结束的位置y endTime: 0，//结束的时间戳critical: 80，//触发翻页的临界值maxTimeCritical: 300，//滑动的时间戳临界值上限minTimeCritical: 100，//滑动的时间戳临界值下限margintop: 0，//滑动下拉距离currentTarget: null，//当前点击的元素的id }，scrollTouchStart:函数(e){让py=e . touch[0].pageY，stamp=e.timeStamp，当前目标=e .当前目标。id；控制台。日志(py)；这个。setdata({ start : py，startTime: stamp，current target t : current target })}，scroltouchmove(e){//console。日志(e)；}，scrollTouchEnd:函数(e) { let py=e.changedTouches[0].pageY，stamp=e.timeStamp，d=this.data，timestamp different=stamp-d . start time；this.setData({ endy: py，endTime: stamp }) console.log('开始：“d.starty”结束：' e.changedTouches[0].pageY)；console.log('时间戳之差： ' timeStampdiffer)；if(timeStampdiffer=d . maxtimecritical timeStampdiffer d . mintimecritical(d . starty e . changed touch[0]).pageY)){ 0让当前目标=解析器(d .当前目标。切片(4))，下一个目标=当前目标1；const query=wx。createselectorquery()；查询。select(` # hook $ { nextTarget } `).boundingClientRect()；query.selectViewport().scrollOffset()；query.exec(函数(RES){//控制台。日志(RES)；if (res[0]！=null){ wx。页面滚动到({滚动顶部： RES[0]).height * currentTarget，})} })} else if(timestampDiffer=d . maxtimecritical timestampDiffer d . mintimecritical(d . starty e . changedTouchs[0]).pageY)) { //下拉让当前目标=解析器(d .当前目标。切片(4))，preTarget=currentTarget - 2==-1？0 : CurrentTarget-2；const query=wx。createselectorquery()；query.select(`#hook1 `).boundingClientRect()；query.selectViewport().scrollOffset()；query.exec(函数(RES){控制台。日志(RES)；wx。页面滚动到({滚动顶部： RES[0]).高度* preTarget }) }) } }，})总结

以上所述是小编给大家介绍的微信小程序功能之全屏滚动效果的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！