微信小程序|上下滚动页面实现
时间:2022-07-24
本文章向大家介绍微信小程序|上下滚动页面实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例描述
微信小程序中,页面的呈现方式非常多样,要使页面不只是单一的一个页面,而要实现在当前页面的自由上下滚动,且上下滚动呈现出每个不同滚动页面的形式,该怎样实现呢?
效果图:
解决方案
页面实现将每一个不同的页面进行单独且相似的wxml代码编写,每个页面放入一个整体的view中,设置bind事件绑定,scroll组件实现滚动事件。
scrollTouchStart——滚动页面起始
scrollTouchEnd——滚动页面结束,
scrollTouchMove——滚动的过程。
代码如下:
<view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:lightyellow' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
<view>
<view>
<view>
<image src="/images/img1.jpg"></image>
</view>
<view>“愿生活里有热汤和甜食,背包里有书籍和纸笔。书里故事如迷宫,迷宫通向海。沟通使误解消除,人自充满善意。走很远的路回家,混沌中生活出新的自己。?”
</view>
</view>
</view>
</view>
1、wxss配置
让每个页面呈现独立性,需要将页面设置height:100%;对每个页面设置一个position定位属性为relative,使每个页面的内容都能够在单独页面呈现。
代码如下:
.scroll-fullpage {
height: 100%;
}
.section {
height: 100%;
}
.cont {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
.cont-body {
width: 75%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pic{
height: 130rpx;
width: 130rpx;
border-radius: 50%
}
2、js配置
date数据的配置和scrollTouchStart、scrollTouchMove、scrollTouchEnd三个事件函数进行配置。代码如下:
data: {
scrollindex: 0,
totalnum: 4,
starty: 0,
startTime: 0,
endy: 0,
endTime: 0,
critical: 80,
maxTimeCritical: 300,
minTimeCritical: 100,
margintop: 0,
currentTarget: null,
},
scrollTouchStart: function (e) {
let py = e.touches[0].pageY,
stamp = e.timeStamp,
currentTarget = e.currentTarget.id;
console.log(py);
this.setData({
starty: py,
startTime: stamp,
currentTarget: currentTarget
})
},
scrollTouchMove(e) {
// console.log(e);
},
scrollTouchEnd: function (e) {
let py = e.changedTouches[0].pageY,
stamp = e.timeStamp,
d = this.data,
timeStampdiffer = stamp - d.startTime;
this.setData({
endy: py,
endTime: stamp
})
结语
在配置一个滚动页面时,注意对页面整体性和每个滚动页面独立性的实现。注意绑定事件,调用scroll组件。END
- 企业级Tomcat安全管理优化方案
- “妈妈”域名Mommy.com66万高价易主 现已建站
- 脸书Messenger已中招,新的加密货币挖矿病毒出现!
- Linux中MySQL配置文件my.cnf参数优化
- 干货,比较全面的c#.net公共帮助类(Common.Utility)
- Linux中如何恢复rm命令误删除的文件之extundelete编译安装及使用
- JDK1.7 安装加(一劳永逸的环境配置)
- Jquery 遍历数组之$().each方法与$.each()方法介绍
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- Jquery 遍历数组之grep()方法介绍
- ExtJs学习笔记(1)_Hello World!
- Jquery filter()方法简介
- 加拿大滑铁卢大学刘腾博士:平行增强学习及其无人驾驶应用
- 曾六位数被秒的yadea.com 终端真是雅迪!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Quill编辑器自定义字体和字体大小
- emlog某重要插件前台SQL注入+Getshell
- ES6中的对象与类
- QQ某业务主站DOM XSS挖掘与分析(绕过WAF)
- 品优购电梯导航案例
- stm32mp157开发板LCD 显示测试&触摸屏测试
- stm32mp157开发板LINE 接口测试方法
- stm32mp157开发板MIC 接口测试方法
- stm32mp157开发板声卡接口测试
- stm32mp157开发板USB Host 接口&OTG 接口测试
- Centos7安装ovs
- 好用-除了Console.log()之外的JS日志打印输出方式
- 解数独
- python编写断点续传下载软件
- cookie和session