微信小程序12行js代码自己写个滑块功能

最新推荐文章于 2024-08-08 15:38:07 发布

换日线°

最新推荐文章于 2024-08-08 15:38:07 发布

阅读量464

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_43764578/article/details/107333813

版权

微信小程序专栏收录该内容

86 篇文章 20 订阅

订阅专栏

效果图如下所示

在这里插入图片描述

.wxml

<view class="jindu" bindtap="cuin">
  <view class="xian" style="width:{{towards}}px;">
    <view class="yuan" bindtouchmove='touchMove'></view>
  </view>
</view>
<view class="bfb">{{percen>100?100:percen}}%</view>

.wxss

page{
  background-color:#ddd;
}
.jindu{
  margin: 50px calc((100% - 80%) / 2) 0;
  width: 80%;
  float: left;
  height: 6rpx;
  background-color: #fff;
  position: relative;
}
.xian{
  width: 0%;
  float: left;
  height: 6rpx;
  background-color: #1989FA;
  position: relative;
  transition: all 0.1s;
}
.yuan{
  border-radius: 50%;
  background: #1989FA;
  position: absolute;
  right: 0rpx;
  display: block;
  margin: calc((6rpx - 14rpx)/2);
  width: 14rpx;
  height: 14rpx;
}
.bfb{
  width: 300px;
  margin: 10px calc((100% - 300px) / 2) 0;
  float: left;
}

.js

Page({
  data: {
    towards: 0,
    percen:0,
    kuan:0,
    width_a:parseInt((wx.getSystemInfoSync().windowWidth*0.8)),
    width_b:parseInt((wx.getSystemInfoSync().windowWidth*0.1)),
  },
  onLoad:function(options){
    this.setData({
      kuan: parseInt((wx.getSystemInfoSync().windowWidth - this.data.width_a) / 2)
    })
  },
  cuin:function(e){
    this.setData({
      towards: (e.detail.x - this.data.kuan) > this.data.width_a ? this.data.width_a : (e.detail.x - this.data.kuan),
      percen: ((e.detail.x - this.data.width_b) / (this.data.width_a / 100)) < 1 ? 0 : parseInt((e.detail.x - this.data.width_b) / (this.data.width_a / 100)),
    })
  },
  touchMove: function (e) {
    if (e.touches.length == 1) {
      var moveX = e.touches[0].clientX;
      var towards = (moveX - this.data.kuan) > this.data.width_a ? this.data.width_a : (moveX - this.data.kuan)
      this.data.percen = (towards / (this.data.width_a / 100)) < 1 ? 0 : parseInt(towards / (this.data.width_a / 100))
      this.setData({
        towards: towards,
        percen: this.data.percen
      })
    }
  },
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。