微信小程式 slider 滑動選擇器

今天來介紹一下slider(滑動選擇器):

官方文件：

2.index.js中：

//獲取應用例項

var that;
var isdisabled = true;
page(,
onload: function
() ,
//設定最小值
mininput: function
(e) )
},//設定最大值
maxinput: function
(e) )
},//設定是否禁用滑動
b***isabled: function
(e) )
} else )}},
//已選擇的顏色
colorselectinput: function
(e) )
},//設定背景條的顏色
bgcolorinput: function
(e) )
},//設定滑塊的大小
blocksizeinput: function
(e) )
},//設定步長，取值必須大於 0，並且可被(max - min)整除
stepinput: function
(e) )
},//設定滑塊的顏色
blockcolorinput: function
(e) )
},//設定是否顯示當前value
btnshowvalue: function
() )
},//完成一次拖動後觸發的事件
sliderchange: function
(e) )
},//拖動過程中的觸發的事件
bindchanging: function
(e) )
},})

/*輸入框樣式  */

.section
/*button樣式 */
.button

class="section_gap">

class="section__title">使用示例：text>
class="body-view">
bindchange="sliderchange"
bindchanging="bindchanging"
min="}"
max="}"
disabled="}"
activecolor='}'
backgroundcolor='}'
block-size='}'
block-color='}'
step="}"
show-value='
}'/>
view>
view>
class="section">
placeholder="設定最小值，預設為20"
type="number"
bindinput="mininput"
confirm-type="done"
focus/>
view>
class="section">
placeholder="設定最大值，預設為100"
type="number"
bindinput="maxinput"
confirm-type="done"
focus/>
view>
class='text'>設定已選擇的顏色(請使用十六進製制顏色值,例如：#ff00ff)view>
class="section"
placeholder=""
value="#"
bindinput="colorselectinput"
confirm-type="done"
focus/>
view>
class='text'>設定背景條的顏色(請使用十六進製制顏色值,例如：#ff00ff)view>
class="section"
placeholder=""
value="#"
bindinput="bgcolorinput"
confirm-type="done"
focus/>
view>
class='text'>設定滑塊的顏色(請使用十六進製制顏色值,例如：#ff00ff)view>
class="section"
placeholder=""
value="#"
bindinput="blockcolorinput"
confirm-type="done"
focus/>
view>
class="section">
placeholder="設定滑塊的大小，取值範圍為12 - 28"
type="number"
bindinput="blocksizeinput"
confirm-type="done"
focus/>
view>
class="section">
placeholder="步長，取值必須大於 0，並且可被(max - min)整除"
type="number"
bindinput="stepinput"
confirm-type="done"
focus/>
view>
class='button'
catchtap='b***isabled'>設定/取消禁用button>
class='button'
catchtap='btnshowvalue'>隱藏當前valuebutton>

微信小程式 slider模組 雙向滑動

這裡是改良的slider滑塊，實現雙向滑動，也是乙個 的儲存 已0點到24點的時間範圍選擇為例 這是wxml頁面 點 點 點 點 這裡是wxss頁面 buymian slide buymian title buymian slide title buymian slide slide range b...

微信小程式 slider元件

class tui slider head 設定step,當前設定步伐為5,當前值 view class tui slider box bindchange changeslider1 step 5 value view view class tui content class tui slider...

微信小程式滑動選擇器

在wxml檔案中，用乙個picker標籤代表選擇器，bindchange是使用者點選確定後觸發的函式，index是picker自帶的引數，使用者點選確定後，bindchange繫結的函式用.detail.value就可以訪問到。第乙個選擇的index值為0，依次遞增。range要在page的data...