Effect picture:
html part:
<!--pages/test-rules/test-rules.wxml-->
<view>
<view class="ageCon">
<view class="title">年龄</view>
<view class="ageOut">
<view class="hr"></view>
<scroll-view class="ageContent" scroll-left="{ {ageScrolLeft}}" scroll-x="true" bindscroll="agescroll" style="height:46px;" >
<block wx:for="{ {age}}" wx-index="index">
<view class="ageItem { {ageItemStatus[index]}}">{ {age[index]}}</view>
</block>
</scroll-view>
</view>
</view>
<view class="heightCon">
<view class="title">身高</view>
<view class="ageOut heightOut">
<view class="curHeight">{ {curHeight}}<text class="heightt1">cm</text>
<view class="tuletip">
<text class="tuletipt1"></text>
<text class="tuletipt2"></text>
</view>
</view>
<scroll-view class="heightContent" scroll-left="{ {heightScrolLeft}}" scroll-x="true" bindscroll="heightscroll" style="height:58px;" >
<block wx:for="{ {height}}" wx-index="index">
<block wx:if="{ {(height[index]%10)==0}}">
<view class="heightItem { {heightItemStatus[heightindex]}}">{ {height[index]}}</view>
</block>
</block>
</scroll-view>
</view>
</view>
<view class="weightCon">
<view class="title">体重</view>
<view class="ageOut weightOut">
<view class="curweight">{ {curweight}}<text class="heightt1">kg</text>
<view class="tuletip">
<text class="tuletipt1"></text>
<text class="tuletipt2"></text>
</view>
</view>
<scroll-view class="weightContent" scroll-left="{ {weightScrolLeft}}" scroll-x="true" bindscroll="weightscroll" style="height:58px;" >
<block wx:for="{ {weight}}" wx-index="index">
<block wx:if="{ {(weight[index]%5)==0}}">
<view class="weightItem { {weighttItemStatus[index]}}">{ {weight[index]}}</view>
</block>
</block>
</scroll-view>
</view>
</view>
</view>
js part:
// pages/test-rules/test-rules.js
Page({
/**
* Initial data of the page
*/
data: {
age: [''],
ageItemStatus: ['', ''],
ageScrolLeft: '',
curHeight: 40,
height: [''],
heightScrolLeft: '',
curweight: 20,
weight: [''],
weightScrolLeft: '',
},
/**
* Life cycle function-monitor page loading
*/
onLoad: function (options) {
var that = this;
var age = [];
for (var i = 0; i < 100; i++) {
age[i] = i;
}
var ageItemStatus = that.data.ageItemStatus;
ageItemStatus[26] = 'active';
var height = [];
for (var i = 0; i < 300; i++) {
height[i] = i;
}
//console.info("Height", height)
var heightItemStatus = that.data.heightItemStatus;
var weight = [];
for (var i = 0; i < 200; i++) {
weight[i] = i;
}
//console.info("weight", weight)
that.setData({
age: age,
ageItemStatus: ageItemStatus,
height: height,
heightItemStatus: heightItemStatus,
weight: weight,
})
//console.info("age:",age)
},
/**
* Life cycle function-monitor the completion of the first rendering of the page
*/
onReady: function () {
},
/**
* Life cycle function-monitor page display
*/
onShow: function () {
},
/**
* Life cycle function-monitor page hiding
*/
onHide: function () {
},
/**
* Life cycle function-monitor page uninstall
*/
onUnload: function () {
},
/**
* Page related event processing function-monitor user pull down actions
*/
onPullDownRefresh: function () {
},
/**
* Handle function of page pull bottom event
*/
onReachBottom: function () {
},
/**
* The user clicks on the upper right corner to share
*/
onShareAppMessage: function () {
},
// age slide
agescroll: function (e) {
console.log(e.detail.scrollLeft);
var scrollLeft = e.detail.scrollLeft;
var index = (parseInt(scrollLeft) / 64 + 2).toFixed(0);
console.info("corresponding age", index);
var status = [];
for (var i = 0; i < 100; i++) {
status[i] = [];
}
status[index] = 'active';
this.setData({
ageItemStatus: status,
ageStr: index,
})
},
//Height slide
heightscroll: function (e) {
console.log(e.detail.scrollLeft);
var scrollLeft = e.detail.scrollLeft;
var index = ((parseInt(scrollLeft) - 36) / 36 * 10 + 50).toFixed(0);
console.info("corresponding height", index);
this.setData({
curHeight: index,
heightIndex: index
})
},
//Weight slide
weightscroll: function (e) {
console.log(e.detail.scrollLeft);
var scrollLeft = e.detail.scrollLeft;
var index = (((parseInt(scrollLeft) - 36) / 36 * 10 + 50) / 2).toFixed(1);
console.info("corresponding weight", index);
this.setData({
curweight: index,
weightIndex: index
})
},
})