小程序开发总结五 单选 下拉框 路径动态传值

单选

<view class='parameter-wrap'>
    <block wx:for="{{parameter}}" wx:key="parameter">
        <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.id}}' bindtap='parameterTap'>{{item.name}}</text>
     </block>
</view>

data:{
    parameter: [{ id: "M", name: '男' }, { id: "F", name: '女' }],
}

onLoad: function (options) {
    this.data.parameter[0].checked = true;
    this.setData({
      parameter: this.data.parameter,
      sex:"M"
    })//默认parameter数组的第一个对象是选中的
}

 parameterTap: function (e) {   //e是获取e.currentTarget.dataset.id所以是必备的，跟前端的data-id获取的方式差不多
    var that = this
    var this_checked = e.currentTarget.dataset.id
    //console.log(e.currentTarget.dataset.id)
    var parameterList = this.data.parameter//获取Json数组
    for (var i = 0; i < parameterList.length; i++) {
      if (parameterList[i].id == this_checked) {
        parameterList[i].checked = true;//当前点击的位置为true即选中
      }
      else {
        parameterList[i].checked = false;//其他的位置为false
      }
    }
    that.setData({
      parameter: parameterList,
      sex: e.currentTarget.dataset.id
    })
  },

下拉框

<view class='top'>
        <!-- 点击下拉的名称 -->
        <view class='top-selected' bindtap='bindShowMsg'>
          <text>{{grade_name}}</text>
        </view>
        <!-- 下拉需要显示的列表 -->
        <view class="select_box" wx:if="{{select}}">
          <view wx:for="{{grades}}" wx:key="item.id">
            <view class="select_one" bindtap="mySelect" data-id='{{item.id}}' data-name="{{item.label}}">{{item.label}}</view>
          </view>
        </view>
      </view>
</view>

data:{
    link_options:"",
    grade_name: '请选择',
    grades: [{
          id: '0',
          label: '自己'
        }, {
          id: '1',
          label: '子女'
        }, {
          id: '2',
          label: '父母'
        }, {
          id: '3',
          label: '配偶'
        }, {
          id: '4',
          label: '兄弟姐妹'
        },{
          id: '5',
          label: '朋友'
        },{
          id: '6',
          label: '其他'
        }],
}

//点击下拉框
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
  //点击选项
  mySelect(e) {
    var name = e.currentTarget.dataset.name
    //console.log(e.currentTarget.dataset.id)
    this.setData({
      grade_name: name,
      select: false,
      link_options: e.currentTarget.dataset.id
    })
  },

路径动态传值

data-newsid="{{item.orderNo}}"  用data-newsid绑定不同的orderNo 即路径订单编号

<view  class="order_info_box" bindtap="go_info" data-newsid="{{item.orderNo}}">

点击跳转时 获取newsid  拼接到url后面

go_info(e){
    var orderNo = e.currentTarget.dataset.newsid;
    //console.log(orderNo)
    wx.navigateTo({
      url: '../myassesinfo/myassesinfo?newsid=' + orderNo,
    })
  }

在子页面 根据父页面传的订单编号获取本订单信息  然后展示

onLoad: function (options) {
    var _this = this;
    var orderNo = options.newsid;
    console.log(options.newsid);
    var url = "http://192.168.1.187:4280/wechat/user_apply_order";
    wx.request({
      method: "post",
      url: url,
      data: {
        act: "getUserApplyOrder",
        orderNo: orderNo,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'token': tokens
      },
      success(res) {
        //console.log(res)
        } 
      },
      fail(err) {
        console.log(err)
      }
    })
}