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

 

基础的滚动组件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

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

posted @ 2019-08-13 15:04 zhangheliang 阅读(...) 评论(...) 编辑 收藏