微信小程序12行js代碼自己寫個滑塊功能(推薦)
更新時間：2020年07月15日 16:04:35 作者：換日線°
這篇文章主要介紹了微信小程序12行js代碼自己寫個滑塊功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖如下所示
.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
})
}
},
})
到此這篇關于微信小程序12行js代碼自己寫個滑塊功能的文章就介紹到這了,更多相關微信小程序滑塊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
bootstrap如何讓dropdown menu按鈕式下拉框長度一致
bootstrap框架提供了下拉菜單組件（dropdown），即點擊一個元素或按鈕，觸發(fā)隱藏的列表顯示出來。下面通過本文給大家介紹bootstrap如何讓dropdown menu按鈕式下拉框長度一致,需要的朋友可以參考下2017-04-04
通過在網站上的資料搜集，得到了很多關于string類用法的文檔，通過對這些資料的整理和加入一些自己的代碼，就得出了一份比較完整的關于string類函數有哪些和怎樣用的文檔了！2015-08-08
用 javascript 實現(xiàn)的點擊復制代碼，需要的朋友可以參考一下2007-03-03
JS組件Bootstrap Table表格多行拖拽效果實現(xiàn)代碼
這篇文章主要介紹了JS組件Bootstrap Table表格多行拖拽效果實現(xiàn)代碼，需要的朋友可以參考下2015-12-12
在構造函數內部通過this關鍵字定義的的方法為特權方法它的作用為在構造函數外面公開訪問(僅限于實例化的對象)，而且還能夠訪問私有成員和方法，感興趣的你可以參考下哈2013-03-03
平常設計表單的時候，我們會加入一些提示文字，最常見的做法是利用value來設置，下面與大家分享一個實例，感興趣的朋友可以參考下哈2013-06-06
本文通過實例代碼給大家實例講解了javascript動態(tài)三角函數知識，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
這篇文章主要分析了javascript單線程異步io回調的特性這個問題，希望我們整理的內容能幫助到你。2017-12-12
javascript設計模式之Adapter模式【適配器模式】實現(xiàn)方法示例
這篇文章主要介紹了javascript設計模式之Adapter模式,結合實例形式分析了JS適配器模式的原理與具體實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2017-01-01
本篇帶來15個正則使用場景，按需索取，收藏恒等于學會?。∮行枰呐笥芽梢越梃b參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07