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


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 相关文章推荐
jquery动态加载js三种方法实例
Aug 03 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 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
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python数据集切分实例
2018/12/08 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
辞职信标准格式
2015/02/27 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书