一、微信自带的进度条——slider组件

<slider bindchanging="sliderChanging" show-value>

当slider组件被拖动时，会执行silderChanging事件处理函数,通过不断打印函数的e.detail.value，可以看出函数执行时输出的信息。

sliderChanging:function(e){console.log(e.detail.value)}

所以，我们可以将音乐、视频、下载文件的进度转化为上面的进度条，用一定的公式进行转换，随着进度的进行，不断实时改变slider的位置实现同步。

二、Vant Weapp上面的Slider滑块组件

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag"><view class="custom-button" slot="button">{{ currentValue }}/100</view>
</van-slider>

.custom-button{display: flex;flex-direction: column;align-items: center;height: 40rpx;width: 120rpx;background-color: red;border-radius: 40rpx;color: #fff;
}

Page({data: {currentValue: 20,},onDrag(event) {this.setData({currentValue: event.detail.value,});},
})

微信小程序——滑动条相关推荐

微信小程序转头条/抖音小程序的方法
很多公司都在做小程序,现在主流小程序有不少:微信小程序/头条小程序/百度小程序/支付宝小程序/QQ小程序...,很多公司为了方便开发都会采用taro或uni等开发方式,直接多端使用,但是对于小公司这些 ...
wx2tt 微信小程序转头条小程序工具
wx2tt 微信小程序转头条小程序工具安装 npm i wx2tt -g 复制代码使用方法 wx2tt <path/to/wxapp> <path/to/ttapp> [- ...
微信小程序导航条配置图片背景
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊,其他页面纯色导航条(沿用微信那套) 相关代码如果你觉得写的不错或者帮到你了,记得给我点个赞哟~ 微信小程序导航条配置图片背景需要实 ...
微信小程序滑动侧边栏
微信小程序滑动侧边栏效果图: 手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏代码附上:.wxml <view class="title"><image cla ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
微信小程序滑动日历实现思路
需求做项目的时候需要用到一种日历,看完设计师的设计稿总结成:可以左右滑动切换显示的日历,能够在某一个日期下显示文字和标签,并且提供选择某一个范围内的日期和单选两种功能. 刚开始看到,想着这种组件网上 ...

微信小程序——滑动条

一、微信自带的进度条——slider组件

二、Vant Weapp上面的Slider滑块组件

微信小程序——滑动条相关推荐

最新文章

热门文章