小程序 - 自定义滑动组件

自定义滑动组件

小程序有自己的滑动组件slider，但是外形不够美观，我就在网上找的一个自定义滑动组件，然后在它的基础上做了修改，已经可以很流畅的滑动了：

这个组件运用了两个自定义的控件，我就一一写出来把
新建一个component文件夹，里面放下这两个文件：

wxzx-progress中
wxml：

<view class="progress progress__bg" style="width: {
  {orientation == 'landscape' ? width : strokeWidth}}rpx; border-radius:{
  {radius}}rpx; background-color: {
  {backgroundColor}}; height: {
  {orientation == 'landscape' ? strokeWidth : width}}rpx">
  <view class="progress__line" style="width: {
  {orientation == 'landscape' ? percent / 100 * width : strokeWidth}}rpx; height: {
  {orientation == 'landscape' ? strokeWidth : percent / 100 * width}}rpx; top:{
  { portraitOrientation == 'bottom' && orientation == 'portrait' ? (100 - percent) / 100 * width : 0 }}rpx; border-radius:{
  {radius}}rpx; {
  { orientation == 'landscape' ?(activeLineColor[1] ? 'background-image: linear-gradient(to right, ' + activeLineColor[0] + ', ' + activeLineColor[1] + ');' : 'background-color:' + activeColor + ';') : (activeLineColor[1] ? 'background-image: linear-gradient(to top, ' + activeLineColor[0] + ', ' + activeLineColor[1] + ');' : 'background-color:' + activeColor + ';')}}"></view>
</view>

在wxss中：

.progress__bg {
  position: relative;
}

.progress__line {
  position: absolute;
}

在js中：

Component({
  properties: {
    percent: {
      type: [Number, String],
      value: 50
    },
    width: {
      type: [Number, String],
      value: 700
    },
    strokeWidth: {
      type: [Number, String],
      value: 10
    },
    activeColor: {
      type: [String, Array],
      value: '#949494'
    },
    backgroundColor: {
      type: String,
      value: '#e5e5e5'
    },
    radius: {
      type: [Number, String],
      value: 5
    },
    orientation: {
      type: [Number, String],
      value: 'landscape'
      // slider方向 landscape横向 portrait纵向
    },
    portraitOrientation: {
      type: [Number, String],
      value: 'bottom'
      // 纵向方向 top 从上到下 bottom 从下到上
    }
  },
  attached: function () {
    let activeColor = this.data.activeColor;
    if (!!~activeColor.indexOf(',')) {
      this.setData({
        activeLineColor: activeColor.split(',')
      })
    }
  }
})

在json中：

{
“component”: true
}

<