看完这篇就少了一个拦路虎
前端代码:
这里没有什么难点,就一个注意点就是当你的数组为二维数组的时候需要设置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 }) }