微信小程序滑動(dòng)選擇器的實(shí)現(xiàn)代碼

更新時(shí)間：2018年08月10日 14:48:05 作者：luozx207

這篇文章主要介紹了微信小程序滑動(dòng)選擇器的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了微信小程序滑動(dòng)選擇器的實(shí)現(xiàn)代碼，分享給大家，具體如下：

實(shí)現(xiàn)微信小程序滑動(dòng)選擇效果

在wxml文件中，用一個(gè)picker標(biāo)簽代表選擇器，bindchange是用戶點(diǎn)擊確定后觸發(fā)的函數(shù)，index是picker自帶的參數(shù)，用戶點(diǎn)擊確定后，bindchange綁定的函數(shù)用.detail.value就可以訪問(wèn)到。第一個(gè)選擇的index值為0，依次遞增。range要在page的data中先定義一個(gè)數(shù)組給它賦值，然后數(shù)組的值就會(huì)變?yōu)檫x擇器中的選項(xiàng)

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class='choseQuestion' >
    {{choseQuestionBank}}
   </view>
  </picker>

js文件中對(duì)應(yīng)的數(shù)據(jù)和函數(shù)如下

Page({
 data:{
  array:['全部','計(jì)算機(jī)網(wǎng)絡(luò)','算法','數(shù)據(jù)結(jié)構(gòu)','linux'],
  type:0,
  choseQuestionBank:"點(diǎn)擊選擇"
 },
 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]
  })
 },
})

點(diǎn)擊確認(rèn)選擇的時(shí)候，只要判斷一下this.data.type的值就可以實(shí)現(xiàn)不同的選擇了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript動(dòng)畫之磁性吸附效果篇
在實(shí)際應(yīng)用中，常常需要為拖拽的元素限定范圍。而通過(guò)限定范圍，再增加一些輔助的措施，就可以實(shí)現(xiàn)磁性吸附的效果。本文將詳細(xì)介紹javascript的磁性吸附，有需要的朋友可以參考借鑒。
2016-12-12
幾個(gè)比較實(shí)用的JavaScript 測(cè)試及效驗(yàn)工具
JavaScript 是一款強(qiáng)大的廣泛運(yùn)用于現(xiàn)代Web站點(diǎn)及應(yīng)用的腳本語(yǔ)言。作為一個(gè)技藝精湛的 Web 開發(fā)者，掌握J(rèn)avaScript可以增強(qiáng)用戶的使用體驗(yàn)，提供交互及富客戶端等功能。
2010-04-04
JavaScript 變量作用域及閉包
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過(guò)實(shí)例來(lái)進(jìn)行演示。
2009-08-08
Js中的FileReader相關(guān)操作方法總結(jié)
FileReader是前端進(jìn)行文件處理的一個(gè)重要的API,特別是在對(duì)圖片的處理上,這篇文章主要給大家介紹了關(guān)于Js中FileReader相關(guān)操作方法的相關(guān)資料,需要的朋友可以參考下
2024-07-07
JS實(shí)現(xiàn)遠(yuǎn)程控制的基本原理和實(shí)現(xiàn)方法
遠(yuǎn)程控制是指通過(guò)網(wǎng)絡(luò)等遠(yuǎn)距離通訊手段控制另一設(shè)備的操作行為，在現(xiàn)實(shí)生活中，隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，遠(yuǎn)程控制技術(shù)越來(lái)越重要，本文將詳細(xì)介紹?JS?實(shí)現(xiàn)遠(yuǎn)程控制的基本原理、開發(fā)流程和實(shí)現(xiàn)方法,需要的朋友可以參考下
2023-06-06
Javascript 表格操作實(shí)現(xiàn)代碼
Javascript操作表格包括獲取值，創(chuàng)建表格
2009-06-06
Javascript實(shí)現(xiàn)單例模式
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計(jì)中較為簡(jiǎn)單但是最為常用的一種設(shè)計(jì)模式。這篇文章主要介紹了Javascript實(shí)現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下
2016-01-01
詳解JS中的柯里化(currying)
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下
2017-08-08
小程序?qū)崿F(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03