Giter VIP home page Giter VIP logo

zy-slider's Introduction

zy-slider

微信小程序双向滑动slider,可用于价格范围选取等功能。

一个选择数值范围的slider,双向可以滑动

先在要使用的地方的json文件中引入该组件

{
  "usingComponents": {
      "zy-slider": "../../component/zyslider"
  },
  "navigationBarTitleText": "zy-slider"
}

然后在wxml中使用

<view class="zy-slider">
    <zy-slider minValue="0" maxValue="100" min="0" max="100" bind:lowValueChange="lowValueChangeAction"
                bind:heighValueChange="heighValueChangeAction" />
</view>
参数说明:
min: Number/String slider 最小值
max: Number/String slider 最大值
minValue: Number/String slider 左边滑块初始位置
maxValue: Number/String slider 右边滑块初始位置
bind:lowValueChange : function 左边滑块回调 {lowValue:lowValue}
bind:heighValueChange : function  右边滑块回调 {heighValue:heighValue}
blockColor : String slider 圆形滑块颜色(默认 #19896f)
backgroundColor : String slider 背景条的颜色(默认 #ddd)
selectedColor : String slider 已选择部分的颜色(默认 #19896f)
方法说明:
reset(): 重置组件
show(): 显示组件
hide(): 隐藏组件

说明一下为何需要调用方法来隐藏 / 显示组件,若组件的上层 view加上 style="display: none;"隐藏再显示,组件恢复显示后布局可能会乱掉:

解决方法是将组件放在需要隐藏的 view 之外,并单独调用内部的 show()hide() 方法来单独显示 / 隐藏组件。

wxss:
.zy-slider {
    margin: 60rpx;
}

简书地址

zy-slider's People

Contributors

wuhan005 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.