微信小程序12行js代碼自己寫(xiě)個(gè)滑塊功能(推薦)

更新時(shí)間：2020年07月15日 16:04:35 作者：換日線°

這篇文章主要介紹了微信小程序12行js代碼自己寫(xiě)個(gè)滑塊功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

效果圖如下所示

在這里插入圖片描述

.wxml

<view class="jindu" bindtap="cuin">
 <view class="xian" style="width:{{towards}}px;">
 <view class="yuan" bindtouchmove='touchMove'></view>
 </view>
</view>
<view class="bfb">{{percen}}%</view>

.wxss

page{
 background-color:#ddd;
}
.jindu{
 margin: 50px calc((100% - 300px) / 2) 0;
 width: 300px;
 float: left;
 height: 6rpx;
 background-color: #fff;
 position: relative;
}
.xian{
 width: 0%;
 float: left;
 height: 6rpx;
 background-color: #1989FA;
 position: relative;
 transition: all 0.1s;
}
.yuan{
 border-radius: 50%;
	background: #1989FA;
	position: absolute;
	right: 0rpx;
	display: block;
 margin: calc((6rpx - 14rpx)/2);
	width: 14rpx;
	height: 14rpx;
}
.bfb{
 width: 300px;
 margin: 10px calc((100% - 300px) / 2) 0;
 float: left;
}

.js

Page({
 data: {
 towards: 0,
 percen:0,
 kuan:0,
 },
 onLoad:function(options){
 this.setData({
  kuan: parseInt((wx.getSystemInfoSync().windowWidth - 300) / 2)
 })
 },
 cuin:function(e){
 this.setData({
  towards: (e.detail.x - this.data.kuan) > 300 ? 300 : (e.detail.x - this.data.kuan),
  percen: (e.detail.x / (300 / 100)) < 1 ? 0 : parseInt(e.detail.x / (300 / 100)),
 })
 },
 touchMove: function (e) {
 if (e.touches.length == 1) {
  var moveX = e.touches[0].clientX;
  var towards = (moveX - this.data.kuan) > 300 ? 300 : (moveX - this.data.kuan)
  this.data.percen = (towards / (300 / 100)) < 1 ? 0 : parseInt(towards / (300 / 100))
  this.setData({
  towards: towards,
  percen: this.data.percen
  })
 }
 },
})

到此這篇關(guān)于微信小程序12行js代碼自己寫(xiě)個(gè)滑塊功能的文章就介紹到這了,更多相關(guān)微信小程序滑塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

bootstrap如何讓dropdown menu按鈕式下拉框長(zhǎng)度一致
bootstrap框架提供了下拉菜單組件（dropdown），即點(diǎn)擊一個(gè)元素或按鈕，觸發(fā)隱藏的列表顯示出來(lái)。下面通過(guò)本文給大家介紹bootstrap如何讓dropdown menu按鈕式下拉框長(zhǎng)度一致,需要的朋友可以參考下
2017-04-04
C++中的string類的用法小結(jié)
通過(guò)在網(wǎng)站上的資料搜集，得到了很多關(guān)于string類用法的文檔，通過(guò)對(duì)這些資料的整理和加入一些自己的代碼，就得出了一份比較完整的關(guān)于string類函數(shù)有哪些和怎樣用的文檔了！
2015-08-08
用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼
用 javascript 實(shí)現(xiàn)的點(diǎn)擊復(fù)制代碼，需要的朋友可以參考一下
2007-03-03
JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
這篇文章主要介紹了JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼，需要的朋友可以參考下
2015-12-12
JS特權(quán)方法定義作用以及與公有方法的區(qū)別
在構(gòu)造函數(shù)內(nèi)部通過(guò)this關(guān)鍵字定義的的方法為特權(quán)方法它的作用為在構(gòu)造函數(shù)外面公開(kāi)訪問(wèn)(僅限于實(shí)例化的對(duì)象)，而且還能夠訪問(wèn)私有成員和方法，感興趣的你可以參考下哈
2013-03-03
js+css實(shí)現(xiàn)增加表單可用性之提示文字
平常設(shè)計(jì)表單的時(shí)候，我們會(huì)加入一些提示文字，最常見(jiàn)的做法是利用value來(lái)設(shè)置，下面與大家分享一個(gè)實(shí)例，感興趣的朋友可以參考下哈
2013-06-06
JavaScript 動(dòng)態(tài)三角函數(shù)實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家實(shí)例講解了javascript動(dòng)態(tài)三角函數(shù)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
分析JS單線程異步io回調(diào)的特性
這篇文章主要分析了javascript單線程異步io回調(diào)的特性這個(gè)問(wèn)題，希望我們整理的內(nèi)容能幫助到你。
2017-12-12
javascript設(shè)計(jì)模式之Adapter模式【適配器模式】實(shí)現(xiàn)方法示例
這篇文章主要介紹了javascript設(shè)計(jì)模式之Adapter模式,結(jié)合實(shí)例形式分析了JS適配器模式的原理與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2017-01-01
正則表達(dá)式在js前端的15個(gè)使用場(chǎng)景梳理總結(jié)
本篇帶來(lái)15個(gè)正則使用場(chǎng)景，按需索取，收藏恒等于學(xué)會(huì)！！有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07