微信小程序音量调节插件
2021/5/24 14:54:46
本文主要是介绍微信小程序音量调节插件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序音量调节插件
- 前言
- 直贴代码
前言
我是通过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对象,又不知道动画持续时间
完结散花…
这篇关于微信小程序音量调节插件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享