微信小程序页面上下滚动效果


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下

看图

微信小程序页面上下滚动效果

源码

<view class="container container-fill">
 <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">
 <view class="section section01 {{scrollindex==0?'active':''}}" style="background: #3399FF;">
 <text class="section-maintitle">页面1</text>
 <text class="section-subtitle">我的页面”1</text>
 </view>
 <view class="section section02 {{scrollindex==1?'active':''}}" style="background: #00CC66;">
 <text class="section-maintitle">页面2</text>
 <text class="section-subtitle">我的页面”2</text>
 </view>
 <view class="section section03 {{scrollindex==2?'active':''}}" style="background: #33CCCC;">
 <text class="section-maintitle">页面3</text>
 <text class="section-subtitle">我的页面”3</text>
 </view>
 <view class="section section04 {{scrollindex==3?'active':''}}" style="background: #6699FF;">
 <text class="section-maintitle">页面4</text>
 <text class="section-subtitle">我的页面”4</text>
 </view>
 <view class="section section05 {{scrollindex==4?'active':''}}" style="background: #9966FF;">
 <text class="section-maintitle">无缝对接双创服5</text>
 <text class="section-subtitle">我的页面”5</text>
 </view>
 </view>
</view>

js

Page({
 data: {
 scrollindex:0, //当前页面的索引值
 totalnum:5, //总共页面数
 starty:0, //开始的位置x
 endy:0, //结束的位置y
 critical: 100, //触发翻页的临界值
 margintop:0, //滑动下拉距离
 },
 onLoad: function () {
 },
 scrollTouchstart:function(e){
 let py = e.touches[0].pageY;
 this.setData({
 starty: py
 })
 },
 scrollTouchmove:function(e){
 let py = e.touches[0].pageY;
 let d = this.data;
 this.setData({
 endy: py,
 })
 if(py-d.starty<100 && py-d.starty>-100){ 
 this.setData({
 margintop: py - d.starty
 })
 }
 },
 scrollTouchend:function(e){
 let d = this.data;
 if(d.endy-d.starty >100 && d.scrollindex>0){
 this.setData({
 scrollindex: d.scrollindex-1
 })
 }else if(d.endy-d.starty <-100 && d.scrollindex<this.data.totalnum-1){
 this.setData({
 scrollindex: d.scrollindex+1
 })
 }
 this.setData({
 starty:0,
 endy:0,
 margintop:0
 })
 },
})

css

.container-fill{
 height: 100%;
 overflow: hidden;
}
.scroll-fullpage{
 height: 100%;
 transition: all 0.3s;
}
.section{
 height: 100%;
}
.section-maintitle{
 display: block;
 text-align: center;
 font-size: 50rpx;
 color: #fff;
 font-weight: bold;
 letter-spacing: 10rpx;
 padding-top: 140rpx;
}
.section-subtitle{
 display: block;
 text-align: center;
 font-size: 40rpx;
 color: #fff;
 font-weight: bold;
 letter-spacing: 10rpx;
}
.active .section-maintitle,
.active .section-subtitle{
 animation: mymove 0.8s;
}
@keyframes mymove{
 from {
 transform: translateY(-400rpx) scale(0.5) rotateY(90deg);
 }
 to {
 transform: translateY(0) scale(1) rotateY(0);
 }
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
node.js实现上传文件功能
Jul 15 #Javascript
js canvas实现5张图片合成一张图片
Jul 15 #Javascript
js使用文件流下载csv文件的实现方法
Jul 15 #Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 #Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
You might like
PHP5 安装方法
2007/01/15 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Python高级用法总结
2018/05/26 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
django admin组件使用方法详解
2019/07/19 Python
django 消息框架 message使用详解
2019/07/22 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
深入了解Python 变量作用域
2020/07/24 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
技术入股合作协议书
2014/10/07 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
田径运动会通讯稿
2015/07/18 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android