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

  • 相关阅读:
    Advanced Configuration Tricks
    Reviewing the Blog Module
    Editing and Deleting Data
    Making Use of Forms and Fieldsets
    Understanding the Router
    SQL Abstraction and Object Hydration
    Preparing for Different Databases
    Java学习理解路线图
    Openstack学习历程_1_视频
    CentOS安装Nginx负载
  • 原文地址:https://www.cnblogs.com/betterlife/p/5969545.html
Copyright © 2011-2022 走看看