微信小程序使用weui-wxss做电费查询模块

最近接触了微信小程序,一个项目中需要在微信小程序做电费查询模块,前端采用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>

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


daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页