微信小程序组件在大作业中的应用实例

陈金坤 嵌入式方向

简述：

在大项目中本人负责前端部分，在页面设计中，页面间传输数据，js中wx.request网络请求函数较为简单，所以更加关注的是怎么将从后端得到的数据更好的在前端展现出来。这里就离不开组件的应用，然而，直接调用虽然很方便，但是一般是无法更改样式的，所以容易显得死板。

1.Picker组件的应用

普通picker组件写法
js

Page({
  data: {
    jobTypeArray: ['请选择职称', '1', '2'],
    jobIndex: 0,//科室类型类型id
  },
  jobPickerChange(e) {
    this.setData({
      jobIndex: e.detail.value
    })
  }
})

键值对picker组件写法
js

Page({
  data: {
     jobTypeArray: [{
      id: 0,
      name: "单选"
    }, {
      id: 1,
      name: "多选"
    }, {
      id: 2,
      name: "问答"
    }],
    jobIndex: 0,
  },
  jobPickerChange(e) {
    this.setData({
      jobIndex: e.detail.value
    })
  }
})

重点在于对wxml的写法，循环键值对数据，需要使用 range-key="{ {‘name’}}"
这里的参数name一定要带个引号

<picker bindchange="jobPickerChange" value="{
  {jobIndex}}" range="{
  {jobTypeArray}}" range-key="{
  {'name'}}">
     <view class="picker">
        {
  {jobTypeArray[jobIndex].name}}
     </view>
</picker>

实现效果如下

注：传参的时候，form默认提交的是选择第几个位置信息，那么想要得到对应的id信息，需要 使用 that.data.array[that.data.arrayIndex].id 根据位置获取数据id的方式

2.小程序swiper轮播图，自定义样式，两种方法：原生方法和