小程序 - 自定义滑动组件

最新推荐文章于 2024-09-24 15:00:05 发布

Lucky cattor

最新推荐文章于 2024-09-24 15:00:05 发布

阅读量1.5k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_43987633/article/details/102707904

版权

这篇博客介绍了如何在微信小程序中自定义滑动组件，以满足更美观的外观需求。作者分享了自己在网上找到的组件并进行修改，使其能够流畅滑动。组件包括两个自定义控件，并详细展示了WXML、WXSS和JS代码实现，以及在页面中的调用方法。

摘要由CSDN通过智能技术生成

自定义滑动组件

小程序有自己的滑动组件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中：

{