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. 概率DP(放棋子)Domination

    题意:https://zoj.pintia.cn/problem-sets/91827364500/problems/91827369874 给你n*m的棋盘,我们定义放满棋盘是:任意一行一列至少有一 ...

  2. BugkuCTF--never give up

    这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...

  3. 二叉树的C++实现

    这是去年的内容,之前放在github的一个被遗忘的reporsity里面,今天看到了就拿出来 #include<iostream> #include<string> using ...

  4. 02 前端之css

    ---恢复内容开始--- 1.css的几种引入方式: 1.行内样式 (行内式是在标记的style属性中设定的css样式.不推荐大规模使用) <p style="color: red&q ...

  5. Django框架——基础之视图系统(View.py)

    Django框架之View.py(视图文件) 1. 视图简介 视图层是Django处理请求的核心代码层,我们大多数Python代码都集中在这一层面. 它对外接收用户请求,对内调度模型层和模版层,统合数 ...

  6. unicode 和utf-8,GBK编码

    说到编码,得先从ASCII编码讲起.ASCII编码是由美国人发明,美国的字符不超过255个,所以ASCII编码使用了8bit 即一个字节来存储字符.由于汉字的数量远超255个,所以中国自己发明了一个G ...

  7. MySQL之数据库优化

    Mysql数据库的优化技术 对mysql优化是一个综合性的技术,主要包括 •表的设计合理化(符合3NF) •添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] ...

  8. qq游戏IE组件停止工作

    你可以下载一个腾讯电脑管家,利用电脑诊所里的腾讯游戏专区里的“网页游 游戏玩不了”这一项修复一下即可.我遇见一次,修复之后就解决了.个人认为是Adobe Flash出问题了.祝你玩的开心.

  9. 线程池ThreadPool

    在面向对象编程中,经常会面对创建对象和销毁对象的情况,如果不正确处理的话,在短时间内创建大量对象然后执行简单处理之后又要销毁这些刚刚建立的对象,这是一个非常消耗性能的低效行为,所以很多面向对象语言中在 ...

  10. python之django_form组件笔记

    Form字段 Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始 ...