微信小程序音量调节插件

前言
直贴代码

前言

我是通过movable-area/movable-view标签来实现拖拽的，仿小程序原生组件的slider

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

原生小程序有一个专门的slider组件：https://developers.weixin.qq.com/miniprogram/dev/component/slider.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 , // 渐变色底色宽度},onLoad: function () {this.getBoxWidth()},// 获取盒子的宽度getBoxWidth() {let that = thisconst query = wx.createSelectorQuery().in(this)query.select('#moveBox').boundingClientRect(function (res) {let scale = res.width / 17that.getPrePosition(scale, that)that.setData({scale: scale})}).exec()},// 获取以前音量调节的位置getPrePosition(scale ,that) {let voiNum = that.data.voiceNumlet numIndex = voiNum ? (voiNum + 1) : 0let index = numIndex * scalethat.setData({x: index,bgWidth: (index+24)})},// 监听movable-view移动位置getPosition(ele) {let that = thislet scale = that.data.scalelet xPosition = ele.detail.xlet num = Math.floor(Math.abs((xPosition)) / scale)/*     console.log('x轴平移距离', xPosition)console.log('当前音量为', num) */that.setData({voiceNum: num,bgWidth:(xPosition+24)})}
})

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

效果为

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

完结散花…

微信小程序音量调节插件相关推荐

微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
微信小程序使用wxparse插件，渲染文章不换行问题
微信小程序使用wxParse插件渲染富文本内容,不换行显示,影响阅读,我的解决方法:在wxParse.wxss中加上如下样式:(在我的小程序里面是有效的) view{/* word-break:bre ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
织梦微信小程序一键生成插件(资讯案例模板），整合织梦CMS一切数据信息
<织梦微信小程序一键生成插件(资讯模板)>是织梦58发布的便于生成微信小程序的插件,让用户更方便生成资讯类小程序. 版本:1.1(当前1.0版本,下载安装之后可以进行更新升级) 使用该插件 ...
微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记
微信小程序使用wxParse插件读取富文本,解析html标记发布时间:2018-04-07 作者:Admin 标签: 微信小程序微信小程序解析HTML标记访问量:1203 使用wxParse可以 ...
微信小程序海报功能插件
文章目录前言一.微信小程序海报功能插件二.效果前言微信小程序海报功能插件. 提示:以下是本篇文章正文内容,下面案例可供参考一.微信小程序海报功能插件 https://github.com/ ...
微信小程序基于第三方插件微信同声传译，以及一些问题解决办法
使用之前首先得在微信微信小程序后台添加插件,获取插件的appid 名称使用时在app.json文件添加插件配置 1 plugins: { 2 WechatSI: { 3 version: '0.1. ...
微信小程序自定义组件/插件等解析
自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...
微信小程序使用第三方插件
这里是使用npm方式安装第三方插件: 1,首先新建一个微信小程序项目并找到该项目的文件地址, 如下图: 该项目中我以安装 weui插件为例进行演示.在上图中的目录中打开PowerShell窗口,先要进 ...

微信小程序音量调节插件

微信小程序音量调节插件

前言

直贴代码

微信小程序音量调节插件相关推荐

最新文章

热门文章