微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门
scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
官方文档:scroll-view
滑动滚动条,下方文本会显示滚动条的状态(到达最上方/滚动中/到达最下方),控制台输出滚动条状态
程序结构
Page({ /**
* 页面的初始数据
*/
data: {
texts:"滚动条状态"
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function() { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() { }, upper: function(event) {
this.setData({ texts: "滚动条到 最上方 了"});
}, lower: function(event) {
this.setData({ texts: "滚动条到 最下方 了" });
}, sroll: function(event) {
this.setData({ texts: "滚动条 滚动 了" });
console.log("我在滚动");
console.log(event);
}
})
test.js
Gary 微信小程序
<scroll-view style="height:200px;" scroll-y="true"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<text>{{texts}}</text>
test.wxml
/* pages/test/test.wxss */
.scroll-view{
white-space: nowrap;
} .scroll-view-item{
height:200px;
} .bc_green{
background-color: green;
} .bc_red{
background-color: red;
} .bc_yellow{
background-color: yellow;
} .bc_blue{
background-color: blue;
}
test.wxss
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.json
实现过程
添加滚动容器属性
scroll-view 容器
style="height:200px;" 设置容器高度
scroll-y="true" 设置容器为纵向
bindscrolltoupper="upper"
滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower="lower"
滚动到底部/右边,会触发 scrolltolower 事件
bindscroll="sroll"
滚动时触发,会触发sroll事件
添加视图进入可滚动区域
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
添加绑定滚动条滚动时的事件
upper: function(event) {
this.setData({ texts: "滚动条到 最上方 了"});
}, lower: function(event) {
this.setData({ texts: "滚动条到 最下方 了" });
}, sroll: function(event) {
this.setData({ texts: "滚动条 滚动 了" });
console.log("我在滚动");
console.log(event);
},
左右方向滚动条改变为上下方向方向滚动条只需要改变scroll-x/scroll-y属性
.bc_green{
background-color: green;
} .bc_red{
background-color: red;
} .bc_yellow{
background-color: yellow;
} .bc_blue{
background-color: blue;
}
wxss同css样式,将颜色作为背景添加到View中,将View添加到滚动视图中
点击"按钮"改变滚动条位置效果
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'red',
scrollTop: 100
},
upper: function (e) {
console.log(e)
},
lower: function (e) {
console.log(e)
},
scroll: function (e) {
console.log(e)
},
tap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
tapMove: function (e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
test.js
Gary 微信小程序
<scroll-view style="height:200px;" scroll-y="true"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll"
scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">>
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view> <button size="mini" bindtap="tap">click me to scroll into view </button>
test.wxml
/* pages/test/test.wxss */
.scroll-view{
white-space: nowrap;
} .scroll-view-item{
height:200px;
} .bc_green{
background-color: green;
} .bc_red{
background-color: red;
} .bc_yellow{
background-color: yellow;
} .bc_blue{
background-color: blue;
} test.wxss
test.wxss
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.json
实现过程
设置滚动条要滚动到的View视图
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
改变滚动条位置,显示出不同View视图
tapMove: function (e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
官方文档 传送门
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
微信小程序_(视图)简单的scroll-view容器的更多相关文章
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 微信小程序_(map)简单的小地图
map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...
- 微信小程序_(案例)简单中国天气网首页
Demo:简单中国天气网首页 Page({ data:{ name:"CynicalGary", temp:"4", low:"-1°C", ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...
随机推荐
- Sigma (化简)牛客多校第一场 -- Integration
思路: 可以裂项化简,类似找规律,可以两项.三项代进去试试看. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <c ...
- 求问:numpy里面索引时,采用整型数组和整型列表的区别!
- spark教程(15)-Streaming
Spark Streaming 是一个分布式数据流处理框架,它可以近乎实时的处理流数据,它易编程,可以处理大量数据,并且能把实时数据与历史数据结合起来处理. Streaming 使得 spark 具有 ...
- Centos7:mysql5.6安装,配置及使用(RPM方式)
1.首先安装好jdk环境,本机所用环境为jdk1.8 2.卸载MariaDB(Centos7自带)与Mysql 2.1卸载:MariaDB #rpm -qa | grep -i mariadb //查 ...
- hashmap的hash方法源doc解读
/** * Computes key.hashCode() and spreads (XORs) higher bits of hash * to lower. Because the table u ...
- 8、linux权限-特殊权限
特殊权限: 1.setuid setuid: 让普通用户能够临时的拥有命令的属主权限,完成一些特殊的操作. suid的授权: chmod u+s chmod u-s chmod 4755 4代表是特殊 ...
- c++ 指定目录下的文件遍历
要实现指定目录下文件的遍历需要执行一下的部分: 第一步获取当前路径的名字:(MAX_PATH是在windows定义的所有的路径名字不超过其,调用该函数会使得得到当前的目录) #include < ...
- 【hdu 6071】Lazy Running
菜鸡永远都在做着变聚的梦. 题意 有 \(4\) 个点连成一个环,连接顺序依次为 \(1-2-3-4-1\).相邻两个点之间有个距离 \(d_{i,i+1}\)(特别地,当 \(i=4\) 时为 \( ...
- google guava工具包
guava这个工具包里有好多有用的工具类 <dependency> <groupId>com.google.guava</groupId> <artifact ...
- web性能优化-浏览器工作原理
要彻底了解web性能优化的问题,得搞清楚浏览器的工作原理. 我们需要了解,你在浏览器地址栏中输入url到页面展示的短短几秒中,浏览器究竟做了什么,才能了解到为什么我们口中所说的优化方案能够起到优化作用 ...