微信小程序音量调节插件

• • 前言
  • 直贴代码

前言

我是通过movable-area/movable-view标签来实现拖拽的

movable-area官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
movable-view官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

效果为:

直贴代码

.wxml文件

<view class="voice flex-box-start">
  <!-- voice标题 -->
  <view class="voice_title">标题：</view>

  <!-- voice操作栏 -->
  <view class="voice_doBox">
    <view class="page-section" id="moveBox">
      <movable-area>
        <movable-view x="{{x}}" direction="horizontal" bindchange="getPosition">
          <image class="voiceImg" src="../../static/numAdd.png"></image>
        </movable-view>
      </movable-area>
    </view>

    <!-- 底色填充 -->
    <view class="voiceBg" style="width:{{bgWidth}}px"></view>

    <!-- 参考刻度值 -->
    <!--     <view class="numBox flex-box-between">
      <view class="indexNum" wx:for="{{16}}" :key='index'>{{item}}</view>
    </view> -->
  </view>


  <!-- 显示移到的距离 -->
  <view class="voice_index">{{voiceNum}}</view>
</view>

.wxss文件

.voice {
  width: 100vw;
}

.voice_doBox {
  width: 500rpx;
  margin-left: 20rpx;
}

.page-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx;
  border: solid 1rpx#D3D3D3;
  height: 50rpx;
}

.voiceBg {
  position: absolute;
  top: 0;
  z-index: -1;
  background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
  box-sizing: border-box;
  border-radius: 24rpx;
  height: 50rpx;
}

movable-area {
  width: inherit;
}

.voice_index {
  margin-left: 20rpx;
  display: inline;
}

.numBox {
  padding: 0 16rpx;
  border: solid 1rpx #D3D3D3;
}

.indexNum {
  font-size: 20rpx;
  color: #999;
}

.voiceImg,
movable-view {
  width: 48rpx;
  height: 48rpx;
}

.js文件

Page({
  data: {
    x: 0,
    voiceNum: 10, // 音量调节
    scale: 0 ,// 刻度值
    bgWidth:0 , // 渐变色底色宽度
  },

  onl oad: function () {
    this.getBoxWidth()
  },

  // 获取盒子的宽度
  getBoxWidth() {
    let that = this
    const query = wx.createSelectorQuery().in(this)
    query.select('#moveBox').boundingClientRect(function (res) {
      let scale = res.width / 17
      that.getPrePosition(scale, that)
      that.setData({
        scale: scale
      })
    }).exec()
  },

  // 获取以前音量调节的位置
  getPrePosition(scale ,that) {
    let voiNum = that.data.voiceNum
    let numIndex = voiNum ? (voiNum + 1) : 0
    let index = numIndex * scale
    that.setData({
      x: index,
      bgWidth: (index+24)
    })
  },

  // 监听movable-view移动位置
  getPosition(ele) {
    let that = this
    let scale = that.data.scale
    let xPosition = ele.detail.x
    let num = Math.floor(Math.abs((xPosition)) / scale)
    /*     console.log('x轴平移距离', xPosition)
        console.log('当前音量为', num) */
    that.setData({
      voiceNum: num,
      bgWidth:(xPosition+24)
    })
  }
})

【注意】：这个插件有一个缺点，就是加载音量调节的默认值，底部的动画跟movable-view不一致

效果为

这个问题还没找到处理的方法，加animation对象，又不知道动画持续时间

完结散花…