微信小程序音量调节插件
作者:互联网
微信小程序音量调节插件
前言
我是通过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对象,又不知道动画持续时间
完结散花…
标签:index,插件,scale,微信,movable,width,let,音量,view 来源: https://blog.csdn.net/weixin_45593968/article/details/117222393