小程序scroll-view的滚动开发

发表于 | 更新于 | 分类于

scroll-view例子

逻辑

数据: 一次读取的所有商品的列表（数量默认不目前不多，不用下拉载入）

设置滚动事件runScroll，

  1. 当滚动时，判断在所有id=currentNavi的对象中,当前所触动选项的位置信息。

  2. 如果位置高于>0，<120就将当前产品的分类设置为右侧分类选项的分类

实现代码

view部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<scroll-view enhanced="true"  fast-deceleration="true" paging-enabled="true" scroll-y="true" class="left-view">
    <view wx:for="{{navigobj}}" wx:key="id" class="{{navignum == item.cate_id? 'navig-list-active':''}} navig-list " data-id="{{item.cate_id}}" bindtap="selectNavig">{{item.cate_name}}</view>
  </scroll-view>
  <scroll-view id="goods_list" scroll-y="true"  fast-deceleration="true" scroll-with-animation="true" binddragstart="dragScroll" scroll-y="true" class="weui-flex__item right-view" scroll-top="{{topNum}}" bindscrolltoupper="upperScroll" bindscrolltolower="lowerScroll" scroll-into-view="{{selGoodsID}}" bindscroll="runScroll">
    <navigator wx:for="{{listobj}}" wx:key="index"  id="goods_sort_{{index}}" url="../details/details?pid={{item.id}}" hover-class="none" class='weui-flex list-item currentNavi' data-catid="{{item.cat_id}}">
      <view class='image-block'>
        <image mode="aspectFill" src="{{staticUrl}}{{item.image}}"></image>
      </view>
      <view class="weui-flex__item content-block">
        <view class="weui-flex__item">{{item.name}}</view>
        <view class="weui-flex__item" wx:if="{{item.scale > 1}}" class="goods-price">抵扣{{item.scale}}份蔬菜</view>
        <view wx:if="{{item.price > 0}}" class="goods-price">单价:{{item.price}}</view>
        <view wx:if="{{sale_status == 2 || sale_status == 3}}" class="buy-block">
          <image wx:if="{{item.num > 0}}" data-id="{{item.id}}" class="buy-left-butt" catchtap="leftButt" src="../../image/B01.png"></image>
          <text wx:if="{{item.num > 0}}" class="buy-text-lable">{{item.num}}</text>
          <image data-id="{{item.id}}" class="buy-right-butt" catchtap="rightButt" src="../../image/B02.png"></image>
        </view>
        <view wx:else class="goods-price">价格:{{item.price}}</view>

      </view>
    </navigator>
  </scroll-view>

几个常用参数

  • enhanced
  • fast-deceleration 滑动减速速率控制，降低滑动速度，无精细化速度控制
  • paging-enabled 分页滑动效果
  • scroll-y 是否纵向滚动
  • id 选择器ID
  • scroll-top 设置竖向滚动条位置

常用事件

  • binddragstart 点击拖拽移动触发
  • bindscrolltoupper 移动到顶端触发
  • bindscrolltolower 移动到底部触发
  • scroll-into-view 一定到指定元素的位置触发
  • bindscroll 滚动时触发

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
runScroll:function(e){
    // console.log(e);
    let that =this;
    wx.createSelectorQuery()
    .in(this)
    .selectAll('.currentNavi')
    .boundingClientRect(function(rect){
      // console.log(rect);
      for (var cate = 0; cate < rect.length; cate++) {
        if (rect[cate].top < 120 && rect[cate].top > 0) {
        	//设置当前选中的分类
			that.setData({navignum:rect[cate].dataset.catid});
        }
      }
    })
    .exec();
  }

小程序选择器

wx.createSelectorQuery 创建选择器
.in 作用在某个范围
.selectAll 选择元素
.boundingClientRect 获取选择元素的节点信息