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


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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 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
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python中的随机函数小结
2018/01/27 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python else语句在循环中的运用详解
2020/07/06 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
淘宝客服专员岗位职责
2014/04/11 职场文书
抵押贷款承诺书
2014/05/30 职场文书
老干部工作先进事迹
2014/08/17 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
校庆团日活动总结
2014/08/28 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
日元符号 ¥
2022/02/17 杂记
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript