微信小程序元素进入可视区域-TC

横行滚动条,用户选中某个元素后进入可视区域

注意scroll-view中的scroll-x要为true
scroll-into-view的值必须为字母开头,不能中文,与下面的view列表元素的id一致(匹配id)

wxml代码

1
2
3
4
5
6
7
8
9
10
11
12
<scroll-view class="scroll-box" scroll-x="true" scroll-y="false" scroll-into-view="{{selectDateInfo.id}}">
<view
id="{{item.id}}"
class="date-item {{selectDateInfo.id == item.id ? 'date-selected' : ''}}"
wx:for="{{weekDateList}}"
wx:key="index"
data-item="{{item}}"
bindtap="selectDateBtn">
<view class="txt-date">{{item.txtDate}}</view>
<view class="number-date">{{item.numberDate}}</view>
</view>
</scroll-view>

js代码

1
2
3
4
5
6
  // 选中列表里某个日期
selectDateBtn (event) {
this.setData({
selectDateInfo: event.currentTarget.dataset.item
})
}

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2024 HL's Blog All Rights Reserved.

UV : | PV :