最近接触了微信小程序，一个项目中需要在微信小程序做电费查询模块，前端采用WeUI设计。

方法：单列选择器

页面效果：

图1.未选择时

图2.点击进行选择选择时

图3.点击进行选择选择后

index.wxml 文件：

          <!-- 单列选择器选择宿舍楼 老版本 -->
          <view class="weui-btn-area">
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
              <button type="default">{{array[index]}}</button>
            </picker>
          </view>

index.js 文件：

Page({
  data: {
    tabs: ["电费查询", "电费充值"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    index:0,
    array: [
      '请选择宿舍楼','沁园1栋', '沁园2栋', '沁园3栋', '沁园4栋',
      '澄园1栋', '澄园2栋', '澄园3栋', '澄园4栋', '澄园5栋'
      ]
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
});

为了在未进行选择时显示“请选择宿舍楼”，对WeUI模板做出了两处修改：
1.在数组中array[0]的位置加入了“请选择宿舍楼”；
2.在button按钮中引用了 {{array[index]}} 。

 <button type="default">{{array[index]}}</button>

作者：戴翔
电子邮箱：[email protected]
简介：中华人民共和国公民，中国共青团员，CSDN博客专家，秦淮区疾控中心托管社会公益组织指南针工作室志愿者，创业公司研发中心负责人，在校大学生。