微信小程序滚动组件scrollview

好久没更新小程序的系列文章了，之前有出过小程序的实战，但是，最近代码君发现，代码集中营的好多读者都是小程序的初学者，所以我觉得有必要出一些基础的教程给初学者学习和使用，因此代码君决定每天讲解小程序的一个基础知识点，带着初学者一起学习小程序，如果觉得简单的读者可以去看代码君的小程序实战篇，好，言归正传，今天我就先讲一个基础的滚动组件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的属性，其他的读者看不懂没关系，后面我会陆续讲解的，

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

1. data中的数据是给wxml控件赋值的
2. toView设置跳转到那个控件ID上
3. scrollLeft设置横向滚动的距离
4. 所有的function方法都是执行触发事件所需要的逻辑
5. this.setData({ })用于更新数据，每次更新都会刷新界面

6. 我把滚动到顶部和底部的触发的事件用日志输出出来，目的是让读者看一下确实执行了相应的事件，我为了让读者看清楚，我注释掉滚动的输出日志，读者可以打开，会输出一系列滚动的位置

   
   输出日志.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;
}

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

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

上面三个属性在布局的时候一定会用到的，今天就先说这几个属性，请初学者一定要记住并学会运用到项目中

总结

这是小程序基础教程的第一篇，如果真心想学习小程序的读者，可以跟着代码君，每天学习一点点，代码君尽量保证每天出一篇小程序教程，读者可以利用坐地铁，坐公交的时间看一看，日积月累，相信以后大家都是小程序大神

相关文章推荐：微信小程序实战篇-购物车

建了一个小程序技术交流群，想入群的读者请加微信

小程序入群.png