微信小程序day03_08之form组件之slider

深藏阁楼爱情的钟 2022-04-23 16:38 416阅读 0赞

### 文章目录 ###

*   *   *  一. slider的介绍
         *  二.代码示例

### 一. slider的介绍 ###

slider为滑块选择器.常用的属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
事件如下:  
主要有两个, 一个是bindchanging ,绑定滑动中的事件. 一个是bindchange滑动完成后触发的事件.  
![20190404214715407.png][]

### 二.代码示例 ###

wxml中的代码如下. 主要演示了slider的一些属性. 还有事件的绑定

js中的代码如下.  
其中iamchanging方法, 用于绑定拖动中的事件.  
changeme方法用于绑定拖动完成后的事件.

Page({ 
      /** * 页面的初始数据 */
      data: { 
        myheight: "500rpx",
        staticHeight: 500
      },
      iamchanging: function(e){ 
         
          var val = e.detail.value;
         
          var newHeight= this.data.staticHeight*(val /100);
    
          this.setData({ 
            myheight: newHeight+ "rpx"
          });
      },
      changeme: function (e) { 
    
        var val = e.detail.value;
    
        var newHeight = this.data.staticHeight * (val / 100);
    
        this.setData({ 
          myheight: newHeight + "rpx"
        });
      }
    })

效果如下,当滑块越往右拖动的时候, 下面的绿色矩形的面积就会越大.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
当拖到78时,面积如下 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/slider.html][https_developers.weixin.qq.com_miniprogram_dev_component_slider.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220224/0a05066997bb43fd9153becbdd8dbc33.png
[20190404214715407.png]: /images/20220224/4bdf053a81454586958c00ac61d4ab0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220224/7de75b138c33488382a932229e1fc3db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220224/d2671fab7a964752902e6c72f9c4388b.png
[https_developers.weixin.qq.com_miniprogram_dev_component_slider.html]: https://developers.weixin.qq.com/miniprogram/dev/component/slider.html