slider组件是通常我们讲的滑动选择器,通常情况下,手机操作滑动选择器远比直接进行数值输入的好。
以下是代码
a.js
changeSize:function(e){ this.data.icon.size = e.detail.value; this.setData(this.data);},changeOpacity:function(e){ this.data.icon.opacity = e.detail.value; this.setData(this.data);}这段是直接放到Page里的,可以调整Size和Opacity,这两个数据是直接放到data段中,所以可以设置初值。代码如下:
data: { icon: { size: 20, opacity: 8 }}至于wxml中,只需定义并设置好方便调整就好
a.wxml
view class="section icon-wrapper" icon type="success" size="{{icon.size}}" style="opacity:{{icon.opacity/10}};"//viewview class="section" view调整图标大小:/view slider show-value max="100" min="10" step="5" value="{{icon.size}}" bindchange="changeSize"/slider/viewview class="section" view调整透明度:/view slider show-value max="10" min="0" step="1" value="{{icon.opacity}}" bindchange="changeOpacity"/slider/view在wxss文件中,设置好section和section.icon-wrapper来确定格式a.wxss
.section{padding: 10px}.section.icon-wrapper{height: 100px; font-size: 12px;}













