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容器的更多相关文章

  1. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  2. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...

  3. 微信小程序_(案例)简单中国天气网首页

    Demo:简单中国天气网首页 Page({ data:{ name:"CynicalGary", temp:"4", low:"-1°C", ...

  4. 微信小程序_(校园视)开发视频的展示页_下

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  5. 微信小程序_(校园视)开发用户注册登陆

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  6. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

  7. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  8. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  9. 微信小程序_简单组件使用与数据绑定

    简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...

随机推荐

  1. python_0基础开始_day08

    第八节 1,文件操作 文件操作目的: 持久化,永久存储 (数据库之前 -- 文件操作就是代替数据库) 读 1,找到文件位 2,双击打开 3,进行一些操作 4,关闭文件 open() 打开,通过pyth ...

  2. 移动端、pc端通用点击复制

    点击复制 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.ge ...

  3. QThread::wait(),一直以来我以为它阻塞的是QThread对象,可是我现在明白,原来阻塞的是这个对象所在的线程(通常是主线程)——所有事情源于 QThread 的事件循环——如果使用继承QThread这一方法,QThread::quit()没有效果,因为这个线程根本就不需要事件循环

    近日,使用QThread,一些问题百思不得其解,看过大牛的文章,恍然大悟啊. 原文 http://hi.baidu.com/dbzhang800/item/c14c97dd15318d17e1f46f ...

  4. 给Repater增加等号

    //不改变数据结构的情况下,增加行号.对Application服务器压力增大,减少DB服务器压力.    protected void repShow_ItemDataBound(object sen ...

  5. k8s的一些基本命令

    kubernetes用到的一些命令 kubectl管理工具以及命令 基础命令:create,delete,get,run,expose,set,explain,edit. create命令:根据文件或 ...

  6. Webpack loaderUtils.parseQuery()

    https://blog.256pages.com/webpack-loaderutils-parsequery/

  7. 禁止缩放meta标签

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale= ...

  8. Clang编译选项和Pass构建

    编译选项相关: 想要添加的选项,以我添加的-fdpu为例子 能通过clang --help得到的选项,整体需要一个解析文件(好像在LLVM项目中都是通过后缀名为xxx.td和xxx.def的文件来进行 ...

  9. NTL 库函数

    NTL是一个高性能,可移植的C ++库,为任意长度的整数提供数据结构和算法; 可用于整数和有限域上的向量,矩阵和多项式; 可用于任意精度浮点运算. NTL为以下方面提供高质量的最先进算法实现: 任意长 ...

  10. python、第六篇:视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...