小程序局部页面自定义滚动条

基础的滚动组件scrollview

scrollview属性

属性名	作用	参数值
scroll-x	设置是否允许横向滚动	true/false 默认是false
scroll-y	设置是否允许纵向滚动	true/false 默认是false
scroll-top	设置纵向滚动条的位置	number
scroll-left	设置横向滚动条的位置	number
scroll-into-view	设置滚动到那个控件，前提要给scroll里面设置控件ID	传控件ID
enable-back-to-top	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	true/false 默认是false
scroll-with-animation	在设置滚动条位置时使用动画过渡	true/false 默认是false
bindscrolltoupper	滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

scrollview属性的使用

一、效果图

效果图.gif

二、XXX.WXML布局

<view>scroll-view 横向</view>

<button class='button' type='primary' size='mini' bindtap='scrollToRed'>点我滚动到绿色</button> <button class='button' type='primary' size='mini' bindtap='scrollTo100'>点我滚动100rpx距离</button> <scroll-view scroll-x="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollTop}}"> <view class="scroll-x"> <view wx:for-items="{{scrolls}}" wx:key="name"> <view id="{{item.tag}}" class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view> <view>scroll-view 纵向</view> <scroll-view scroll-y="true" style="height: 500rpx;"> <view class="scroll-y" > <view wx:for-items="{{scrolls}}" wx:key="name"> <view class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view>

这里面要我主要讲解scrollview的属性，其他的读者看不懂没关系，后面我会陆续讲解的，

首先看 scroll-x/y 属性，对比上面两个scrollview，就可以看出差别，一个是横向一个纵向，结合效果图就可以理解这个属性了
bind一般以这个开头的就是绑定某个事件，当用户触发某个事件的时候会执行相应的代码，具体的代码执行逻辑要写在xxx.js上
scroll-into-view 设置滚动到那个id，toView是用来传递滚动的ID
scroll-left 因为例子中是横行滚动，所以要用scroll-left属性，如果是纵向要用scroll-Top属性，等号后面是传递的值，如果是100代表横向滚动100的距离
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

三、XXX.JS逻辑代码

Page({
  data: {
    toView: 'yellow',
    scrollLeft: 0, //滚动的数组 scrolls: [ { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, ], }, scrollToRed:function(e) { this.setData({ toView: 'green' }) }, scrollTo100: function (e) { this.setData({ scrollLeft: 100 }) }, upper: function (e) { console.log('滚动到顶部') }, lower: function (e) { console.log('滚动到底部') }, scroll: function (e) { console.log(e) }, })

js代码中需要讲解的地方

data中的数据是给wxml控件赋值的
toView设置跳转到那个控件ID上
scrollLeft设置横向滚动的距离
所有的function方法都是执行触发事件所需要的逻辑
this.setData({ })用于更新数据，每次更新都会刷新界面
我把滚动到顶部和底部的触发的事件用日志输出出来，目的是让读者看一下确实执行了相应的事件，我为了让读者看清楚，我注释掉滚动的输出日志，读者可以打开，会输出一系列滚动的位置

输出日志.png

四、XXX.WXSS样式

.button
{
  margin: 20rpx;
}
.scroll-x {
  display: flex; flex-direction: row; } .scroll-y { display: flex; flex-direction: column; } .green { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: green; } .red { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: red; } .yellow { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: yellow; }

样式这边就先教大家几个常用的样式

display属性
- none:此元素不会被显示
- block：两个元素自动换行
- inline：两个元素靠在一起
- inherit：继承父类
- flex：多栏多列
flex-direction属性
- column 垂直分布
- row 水平分布
align-items 设置item对齐方式
- center
- left
- right