微信小程序——slider组件

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}};"/>
</view>
<view class="section">
  <view>调整图标大小：</view>
  <slider show-value max="100" min="10" step="5" value="{{icon.size}}" bindchange="changeSize"></slider>
</view>
<view 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;}