zoukankan      html  css  js  c++  java
  • 微信小程序组件slider

    表单组件slider:官方文档

    Demo Code:

    var pageData = {}
    for (var i = 1; i < 5; i++) {
      (function (index) {
        pageData['slider' + index + 'change'] = function(e) {
          console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
        }
      })(i)
    }
    Page(pageData)
    JS
    <view class="section section_gap">
      <text class="section__title">设置left/right icon</text>
      <view class="body-view">
        <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
      </view>
    </view>
    
    <view class="section section_gap">
      <text class="section__title">设置step</text>
      <view class="body-view">
        <slider bindchange="slider2change" step="5"/>
      </view>
    </view>
    
    <view class="section section_gap">
      <text class="section__title">显示当前value</text>
      <view class="body-view">
        <slider bindchange="slider3change" show-value/>
      </view>
    </view>
    
    <view class="section section_gap">
      <text class="section__title">设置最小/最大值</text>
      <view class="body-view">
        <slider bindchange="slider4change" min="50" max="200" show-value/>
      </view>
    </view>
    WXML
    .section__title{
        font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","9ED14F53",Arial,sans-serif;
    }
    .section_gap{
        margin-top: 30px;
    }
    WXSS

    Tip:

    left-icon  right-icon在开发工具中并没有效果 ,官方定义的属性也没有这两项。

    也许在真实环境中有效果。2016·10·17

  • 相关阅读:
    将Excel文件.xls导入SQL Server 2005
    linux mount命令
    python write file
    vim visual模式 复制
    chef简介
    录音整理文字工具otranscribe简介
    ftp put get 的使用方法
    yum lock 解决方法
    phalcon builder get raw sql
    centos7安装VirtualBox
  • 原文地址:https://www.cnblogs.com/betterlife/p/5969545.html
Copyright © 2011-2022 走看看