小程序实现【滑动齿轮数字选择器】

齿轮数字选择器】"/>

小程序实现【滑动齿轮数字选择器】

效果：

关键：用小程序picker-view实现，linear-gradient实现背景渐变色

wxml:

<view><view>{{arr1Value}}{{arr2Value}}{{arr3Value}}{{arr4Value}}{{arr5Value}}{{arr6Value}}{{arr7Value}}{{arr8Value}}{{arr9Value}}</view><picker-view indicator-style="height: 50px;" style="" class="color" value="{{value}}" bindchange="bindChange" ><picker-view-column><view wx:for="{{arr1}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr2}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr3}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr4}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr5}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr6}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr7}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr8}}" style="line-height: 50px">{{item}}</view></picker-view-column><picker-view-column><view wx:for="{{arr9}}" style="line-height: 50px">{{item}}</view></picker-view-column></picker-view>
</view>

wxss:

.color{width: 100%; height: 50px;color: #e9c565;font-size:22pt;text-align: center;padding: 0 10px;box-sizing: border-box;
}
picker-view-column{margin: 0 3px;	background: linear-gradient(to bottom,#212121, #aaaaaa,  black);
}

js:

var that
Page({data: {arr1: [0,1,2,3,4,5,6,7,8,9],arr2: [0,1,2,3,4,5,6,7,8,9],arr3: [0,1,2,3,4,5,6,7,8,9],arr4: [0,1,2,3,4,5,6,7,8,9],arr5: [0,1,2,3,4,5,6,7,8,9],arr6: [0,1,2,3,4,5,6,7,8,9],arr7: [0,1,2,3,4,5,6,7,8,9],arr8: [0,1,2,3,4,5,6,7,8,9],arr9: [0,1,2,3,4,5,6,7,8,9],},onLoad: function(){that = this},bindChange: function(e) {const val = e.detail.value  this.setData({arr1Value: this.data.arr1[val[0]],arr2Value: this.data.arr2[val[1]],arr3Value: this.data.arr3[val[2]],arr4Value: this.data.arr4[val[3]],arr5Value: this.data.arr5[val[4]],arr6Value: this.data.arr6[val[5]],arr7Value: this.data.arr7[val[6]],arr8Value: this.data.arr8[val[7]],arr9Value: this.data.arr9[val[8]],})}
})