<view class="container">
<slider value="{{sliderValue}}" bindchange="sliderChange" show-value min="0" max="100" />
<text>当前值:{{sliderValue}}</text>
</view>
在对应的 .js 文件中,你需要定义 sliderValue 和 sliderChange 函数:
Page({
data: {
sliderValue: 50,
},
sliderChange: function (e) {
const value = e.detail.value;
this.setData({
sliderValue: value,
});
},
});
在这个示例中,slider 组件的 value 属性表示当前数值,通过 bindchange 绑定了 sliderChange 函数,当用户滑动选择后,会触发这个函数。在 sliderChange 函数中,通过 e.detail.value 获取滑动后的数值,并将其更新到 sliderValue 中,以便在页面上反映当前选择的数值。
你可以根据实际需求调整 slider 的属性,如 min 和 max 用于设置滑动范围的最小和最大值,show-value 用于显示当前数值,等等。这个组件通常用于需要用户选择一个范围值的场景。
转载请注明出处:http://www.zyzy.cn/article/detail/809/微信小程序