微信小程序 scroll-view详解

官方文档

注意：本文全部代码实例皆为竖直方向滚动

官方的代码实例(小小改动，自己增加了css）

画重点：使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height,注意height的单位必须固定为px哦

有几个必须要知道的值的含义：

id: 注意id不能用数字,不然会一直报错烦死人。

scroll-view: 就是默认显示的视图。

scroll-into-view: 的值就是你想滚动到的那个元素的id。

scroll-y: 设置滚动为竖直方向, scroll-x:设置滚动为水平方向

scroll-top: MDN的解释比官方的文档清楚。

index.wxml

<view class="section"><view class="section__title">vertical scroll</view><scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" 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><view class="btn-area"><button size="mini" bindtap="tap">click me to scroll into view </button><button size="mini" bindtap="tapMove">click me to scroll</button></view>
</view>

index.wxss

.scroll-view-item{width:100%;height: 100px;
}
.bc_green{background: green;
}
.bc_red{background: red;
}
.bc_yellow{background: yellow;
}
.bc_blue{background: blue;
}

index.js

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})}
})

最后通过按钮来控制滚动。

来一张截图：

这里视图图窗口的高度是固定的，但是设备经常会有变化啊，自适应滚动视图详见下一篇博文。

微信小程序 scroll-view详解相关推荐

php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
微信小程序退款功能(详解完整)
微信小程序支付->退款微信小程序退款的时候如果是线上,就会涉及到Linux读取打包后项目存放文件路径失败问题,获取不到其中的微信退款证书,在这里就需要使用流的方式进行读取路径,经大佬指点才最终 ...
微信小程序中 setData 详解
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...

微信小程序 scroll-view详解

微信小程序 scroll-view详解相关推荐

最新文章

热门文章