微信小程序滑動選擇器的實現(xiàn)代碼
更新時間：2018年08月10日 14:48:05 作者：luozx207
這篇文章主要介紹了微信小程序滑動選擇器的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了微信小程序滑動選擇器的實現(xiàn)代碼，分享給大家，具體如下：
實現(xiàn)微信小程序滑動選擇效果
在wxml文件中，用一個picker標簽代表選擇器，bindchange是用戶點擊確定后觸發(fā)的函數(shù)，index是picker自帶的參數(shù)，用戶點擊確定后，bindchange綁定的函數(shù)用.detail.value就可以訪問到。第一個選擇的index值為0，依次遞增。range要在page的data中先定義一個數(shù)組給它賦值，然后數(shù)組的值就會變?yōu)檫x擇器中的選項
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class='choseQuestion' >
{{choseQuestionBank}}
</view>
</picker>
js文件中對應(yīng)的數(shù)據(jù)和函數(shù)如下
Page({
data:{
array:['全部','計算機網(wǎng)絡(luò)','算法','數(shù)據(jù)結(jié)構(gòu)','linux'],
type:0,
choseQuestionBank:"點擊選擇"
},
bindPickerChange: function (e) {
var that=this
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
type: e.detail.value,
choseQuestionBank: that.data.array[e.detail.value]
})
},
})
點擊確認選擇的時候，只要判斷一下this.data.type的值就可以實現(xiàn)不同的選擇了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在實際應(yīng)用中，常常需要為拖拽的元素限定范圍。而通過限定范圍，再增加一些輔助的措施，就可以實現(xiàn)磁性吸附的效果。本文將詳細介紹javascript的磁性吸附，有需要的朋友可以參考借鑒。2016-12-12
JavaScript 是一款強大的廣泛運用于現(xiàn)代Web站點及應(yīng)用的腳本語言。作為一個技藝精湛的 Web 開發(fā)者，掌握JavaScript可以增強用戶的使用體驗，提供交互及富客戶端等功能。2010-04-04
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過實例來進行演示。2009-08-08
Js中的FileReader相關(guān)操作方法總結(jié)
FileReader是前端進行文件處理的一個重要的API,特別是在對圖片的處理上,這篇文章主要給大家介紹了關(guān)于Js中FileReader相關(guān)操作方法的相關(guān)資料,需要的朋友可以參考下2024-07-07
JS實現(xiàn)遠程控制的基本原理和實現(xiàn)方法
遠程控制是指通過網(wǎng)絡(luò)等遠距離通訊手段控制另一設(shè)備的操作行為，在現(xiàn)實生活中，隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，遠程控制技術(shù)越來越重要，本文將詳細介紹?JS?實現(xiàn)遠程控制的基本原理、開發(fā)流程和實現(xiàn)方法,需要的朋友可以參考下2023-06-06
Javascript操作表格 包括獲取值，創(chuàng)建表格2009-06-06
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計中較為簡單但是最為常用的一種設(shè)計模式。這篇文章主要介紹了Javascript實現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
Javascript實現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03