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


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 表单取值赋值的一些基本操作
Oct 11 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
js读写json文件实例代码
Oct 21 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 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中iconv函数使用方法
2008/05/24 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 域名分析工具实现代码
2009/07/15 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python实现简单银行管理系统
2019/10/25 Python
python 递归相关知识总结
2021/03/03 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
产品发布会策划方案
2014/05/12 职场文书
个人担保书范文
2014/05/20 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2014年信用社工作总结
2014/11/25 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
话题作文之成长
2019/12/09 职场文书
Java 多态分析
2022/04/26 Java/Android