微信小程序|上下滚动页面实现

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

案例描述

微信小程序中，页面的呈现方式非常多样，要使页面不只是单一的一个页面，而要实现在当前页面的自由上下滚动，且上下滚动呈现出每个不同滚动页面的形式，该怎样实现呢？

效果图：

解决方案

页面实现将每一个不同的页面进行单独且相似的wxml代码编写，每个页面放入一个整体的view中，设置bind事件绑定，scroll组件实现滚动事件。

scrollTouchStart——滚动页面起始

scrollTouchEnd——滚动页面结束，

scrollTouchMove——滚动的过程。

代码如下：

“愿生活里有热汤和甜食，背包里有书籍和纸笔。书里故事如迷宫，迷宫通向海。沟通使误解消除，人自充满善意。走很远的路回家，混沌中生活出新的自己。????”

1、wxss配置

让每个页面呈现独立性，需要将页面设置height:100%;对每个页面设置一个position定位属性为relative，使每个页面的内容都能够在单独页面呈现。

代码如下：

.scroll-fullpage  {    height:  100%;  }  .p {    height:  100%;  }  .cont {    width: 100%;    height:  100%;    margin: 0  auto;    position:  relative;  }  .cont-body {    width: 75%;    position:  absolute;    left: 50%;    top: 50%;    transform:  translate(-50%, -50%);  }    .pic{     height:  130rpx;     width:  130rpx;      border-radius: 50%  }

2、js配置

date数据的配置和scrollTouchStart、scrollTouchMove、scrollTouchEnd三个事件函数进行配置。代码如下：

data: {       scrollindex: 0,      totalnum:  4,      starty: 0,        startTime:  0,      endy: 0,      endTime:  0,      critical:  80,       maxTimeCritical: 300,       minTimeCritical: 100,      margintop:  0,       currentTarget: null,    },  scrollTouchStart: function (e) {      let py =  e.touches[0].pageY,        stamp =  e.timeStamp,         currentTarget = e.currentTarget.id;       console.log(py);       this.setData({        starty:  py,         startTime: stamp,         currentTarget: currentTarget      })    },     scrollTouchMove(e) {      //  console.log(e);    },     scrollTouchEnd: function (e) {      let py =  e.changedTouches[0].pageY,        stamp =  e.timeStamp,        d =  this.data,         timeStampdiffer = stamp - d.startTime;       this.setData({        endy:  py,        endTime:  stamp      })

结语

在配置一个滚动页面时，注意对页面整体性和每个滚动页面独立性的实现。注意绑定事件，调用scroll组件。

END

实习主编   |   王楠岚

责      编   |   wrape

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！