小程序picker解決方案

看完這篇就少了一個攔路虎

前端代碼：

       這裏沒有什麼難點，就一個注意點就是當你的數組爲二維數組的時候須要設置range-key='你須要顯示的字段名' 

      value="{ {index}}",這裏的index就是數據的索引值，這個值的做用是顯示數據的第幾個值，好比這裏是1，就會在你打開picker標籤的時候，顯示的就是數組索引爲1的這個字段值

<view class="m-inputPart">
            <view>選擇分類</view>
            <picker value="{
  {index}}" bindchange='changes' range="{
  {category}}" range-key='{
  {"name"}}'>
                                
                <input cursorSpacing="20" value="{
  {category[index].name}}"></input>

            </picker>
        </view>

 

如今咱們來解決第一個難點

1.怎麼獲取到循環數組的id

      這裏應該會有不少人跟我開始同樣，我設置一個自定義屬性就能夠了啊！當你調試的時候會發現，全部的id都是同樣的，由於你自定義屬性確定會這樣定義data-id="{ {category[index].id}}",這裏就是第一個坑了，你會發現你value的值是多少，那個id就全是這個索引的id，咱們這樣的方案宣告失敗

這裏來介紹一下我本身的作法：

       咱們就能夠使用picker的自己屬性，當點擊picker時會觸發bindchange這個事件，就會獲取value這個值，下來咱們將選擇的這個value值保存起來，咱們在將分類的數據保存到緩存中

     開始循環分類數據，判斷當分類的索引值跟選擇的value相等時，聲明一個變量categoryindex，將分類數據的索引保存起來

     下來直接在分類數據拿到選擇的分類id，保存到緩存中

 

js代碼：

/*
author:咔咔
address:陝西西安
wechat:fangkangfk
*/

changes: function (e) {
      var num = e.detail.value;
      console.log('選擇了第'+num+'個')
      wx.setStorageSync('index', num);
      var categoryData = wx.getStorageSync('categoryData');
      for (var i = 0; i<categoryData.length;i++){
        if (i == num){
          var categoryIndex = num;
        }
      }
      var categoryId = categoryData[categoryIndex]['id'];
      wx.setStorageSync('categoryId', categoryId);
      this.setData({
        index: num,
      })
    },

 

提交數據時處理：

   提交數據時獲取分類id，存在時就直接使用，不存在的時候就是默認第一個便可，這樣就成功的獲取到了分類數據的id

var categoryId = wx.getStorageSync('categoryId');

      if (categoryId) {
        var category_id = categoryId
      } else {
        var categoryData = wx.getStorageSync('categoryData');
        var category_id = categoryData[0]['id'];
      }

 

 

咱們還須要在一次進入頁面的時候讓其顯示使咱們以前選擇的數據

    這個index就是picker的value屬性的值，這個值上邊也說了是顯示數據的索引值

   index這個緩存來自選擇的時候保存的數據

   判斷這個index這個是否存在，存在的話就直接將value的值設置成他既能夠，反之就是默認0

  

var categoryIndex = wx.getStorageSync('index');

      if (categoryIndex){
        this.setData({
          index:categoryIndex
        })
      }else{
        this.setData({
          index:0
        })
      }