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

微信小程序使用picker組件出現(xiàn)的問題探究

 更新時間:2023年01月12日 16:11:10   作者:code_充電站  
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實例,這里的搜索框使用的是vant微信小程序組件庫,picker使用的微信小程序的原生組件,需要的朋友可以參考下

一、picker基本概念

先來看一下官方文檔中picker的基本概念:

從底部彈起的滾動選擇器,現(xiàn)支持三種選擇器,通過mode來區(qū)分,分別是普通選擇器,時間選擇器,日期選擇器,默認(rèn)是普通選擇器。

重要屬性

  • range: 選取范圍,數(shù)據(jù)類型為Array / Object Array,mode為 普通選擇器 時,range 有效;
  • value: value 的值表示選擇了 range 中的第幾個(下標(biāo)從 0 開始),數(shù)據(jù)類型肯定是Number;
  • bindchange: 綁定事件,value 改變時觸發(fā) change 事件,event.detail = {value: value}。
  • mode:選擇器類型,可以是selector( 普通選擇器)、multiSelector(多列選擇器)、date(時間選擇器)、time(日期選擇器)、region(省市區(qū)選擇器);

二、遇到的問題

問題說在前面,同一個頁面使用多個普通選擇器遇到了問題,選擇一個選項,其他選項也跟隨著改變了。

代碼如下:

//picker.wxml:   
<view class="column_list" >
        <text class="font15">選項一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項二</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項三</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
//picker.js
    Page({
    data: {
        index:0,//設(shè)置索引值默認(rèn)為0
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
       // console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value)
       // 設(shè)置這個攜帶值賦值給索引值index
       // 所以option1 ,option2 ,option3的索引值都是一樣的
        this.setData({
            index: e.detail.value
        })
    }
})

因為默認(rèn)索引值(也叫“下標(biāo)”)都是index,綁定事件也只是改變了index。所以改變一個選項,其他選項都跟著改變了。

三、如何解決

首先想到的解決辦法就是自定義不同的索引值index1、index2,、index3,分別綁定不同的時間bindchange1、bindchange2、bindchange3改變其對應(yīng)的索引值。

代碼如下:

//picker.wxml: 
 <view class="column_list" >
        <text class="font15">選項一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index1]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項二</text>
        <picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index2]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">選項三</text>
        <picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index3]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    // picker.js
    Page({
    data: {
        index1:0,
        index2:0,
        index3:0,
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
        this.setData({
            index1: e.detail.value
        })
    },
    bindchange2:function (e) {
        this.setData({
            index2: e.detail.value
        })
    },
    bindchange3:function (e) {
        this.setData({
            index3: e.detail.value
        })
    }
})

這樣一個頁面多個picker的問題就解決了,但是現(xiàn)在又發(fā)現(xiàn)了一個新的問題:

為什么多個picker會出現(xiàn)相互影響的問題?比如在第一個選擇器選擇了3,剩下的選擇器點進(jìn)去默認(rèn)都是從第3個開始?” 小程序開發(fā)工具中的確存在,看了社區(qū)的帖子,才知道這個是官方的bug,目前還沒有修復(fù)。

四、延伸

在這里使用了多個picker,可以想到使用wx:for循環(huán),那么為了渲染方便,數(shù)據(jù)就要修改為對象的數(shù)組。

// picker.js
Page({
    data: {
    //每個對象就是一個選擇器,有自己的索引值index,標(biāo)題title,選項option(又是一個數(shù)組)
        objArray:[
            {
                index:0,
                title:'選項一',
                option: ['1', '2', '3','4','5'],
            },
            {
                index:0,
                title:'選項二',
                option: ['一', '二', '三','四','五'],
            },
            {
                index:0,
                title:'選項三',
                option: ['①', '②', '③','④','⑤']
            },
        ]
    },
    // 綁定事件,因為不能用this.setData直接設(shè)置每個對象的索引值index。
    // 所以用自定義屬性current來標(biāo)記每個數(shù)組對象的下標(biāo)
    bindChange_select: function(ev) {
    // 定義一個變量curindex 儲存觸發(fā)事件的數(shù)組對象的下標(biāo)
        const curindex = ev.target.dataset.current
    // 根據(jù)下標(biāo) 改變該數(shù)組對象中的index值
        this.data.objArray[curindex].index = ev.detail.value
    // 把改變某個數(shù)組對象index值之后的全新objArray重新 賦值給objArray
        this.setData({
            objArray: this.data.objArray
        })
    }
})

wx:for綁定數(shù)組objArray,當(dāng)前項的下標(biāo)變量名默認(rèn)為index,數(shù)組當(dāng)前項的變量名默認(rèn)為item,為了區(qū)分選項option中的下標(biāo)

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名為itm,使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名為idx。

關(guān)鍵點是:自定義一個屬性對應(yīng)當(dāng)前下標(biāo) data-current=“{{idx}}”,綁定事件bindChange_select觸發(fā)時判斷出是哪個數(shù)組對象觸發(fā)的,就改變該數(shù)組對象中的index值。

//picker.wxml:
 <view class="column_list mt_10" wx:for="{{objArray}}" wx:for-item="itm"  wx:for-index="idx" >
        <text class="font15">{{itm.title}} </text>
        <picker  class="inputText"  bindchange="bindChange_select" value="{{itm.index}}" data-current="{{idx}}" range="{{itm.option}}" >
            <view class="select_picker">
                 {{itm.option[itm.index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

五、效果圖

到此這篇關(guān)于微信小程序使用picker組件出現(xiàn)的問題探究的文章就介紹到這了,更多相關(guān)小程序picker組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript獲取本機(jī)IP地址三種常用方式

    JavaScript獲取本機(jī)IP地址三種常用方式

    在瀏覽器中使用JavaScript獲取本機(jī)IP地址是不可行的,因為瀏覽器的安全策略禁止JavaScript訪問這樣的信息,這篇文章主要給大家介紹了關(guān)于JavaScript獲取本機(jī)IP地址的三種常用方式,需要的朋友可以參考下
    2023-12-12
  • 淺談js中子頁面父頁面方法 變量相互調(diào)用

    淺談js中子頁面父頁面方法 變量相互調(diào)用

    下面小編就為大家?guī)硪黄獪\談js中子頁面父頁面方法 變量相互調(diào)用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例

    在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例

    今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 如何使用JS獲取IE上傳文件路徑(IE7,8)

    如何使用JS獲取IE上傳文件路徑(IE7,8)

    本篇文章是對使用JS獲取IE上傳文件路徑的實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下
    2013-07-07
  • 詳解javascript獲取url信息的常見方法

    詳解javascript獲取url信息的常見方法

    本篇文章主要對javascript獲取url信息的常見方法進(jìn)行介紹,具有很好的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • 教你巧用?import.meta?實現(xiàn)熱更新的問題

    教你巧用?import.meta?實現(xiàn)熱更新的問題

    import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象,它包含了這個模塊的信息,這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下
    2022-04-04
  • JS如何實現(xiàn)動態(tài)添加的元素綁定事件

    JS如何實現(xiàn)動態(tài)添加的元素綁定事件

    這篇文章主要介紹了JS如何實現(xiàn)動態(tài)添加的元素綁定事件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • JS中的prototype與面向?qū)ο蟮膶嵗v解

    JS中的prototype與面向?qū)ο蟮膶嵗v解

    JS中的prototype與面向?qū)ο蟮膶嵗v解,需要的朋友可以參考一下
    2013-05-05
  • 一次微信小程序內(nèi)地圖的使用實戰(zhàn)記錄

    一次微信小程序內(nèi)地圖的使用實戰(zhàn)記錄

    這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • js實現(xiàn)日期級聯(lián)效果

    js實現(xiàn)日期級聯(lián)效果

    本篇文章主要是對js實現(xiàn)日期級聯(lián)效果的實例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01

最新評論