欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年07月15日 16:04:35   作者：換日線°  
這篇文章主要介紹了微信小程序12行js代碼自己寫個(gè)滑塊功能,本文通過實(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代碼自己寫個(gè)滑塊功能的文章就介紹到這了,更多相關(guān)微信小程序滑塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論