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


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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
详解JavaScript执行模型
Nov 16 Javascript
js实现碰撞检测
Jan 29 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
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Python切片用法实例教程
2014/09/08 Python
python实现ID3决策树算法
2017/12/20 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python Map 函数的使用
2020/08/28 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
门卫班长岗位职责
2013/12/15 职场文书
综合办公室主任职责
2013/12/16 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
大专学生求职信
2014/07/04 职场文书
三严三实对照检查材料
2014/08/25 职场文书
外出考察学习心得体会
2016/01/18 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
nginx 配置指令之location使用详解
2022/05/25 Servers