微信小程序写选择题类型

本人拿到的需求是投票类型,所以数据是后端传过来的数据,类似选择题也可以参考此方法,但是如果是一个页面只展示一个的这种就不适用。
效果图:
在这里插入图片描述

<view class="">
          <view wx:for="{{ITEMSLIST}}" wx:key="index" class="guiyue-item" >
              <view class="guiyue-item-title">
                    <view>{{item.TITLE}}</view>
              </view>
                  <view class="weui-cells weui-cells_after-title">
                        <radio-group bindchange="radioChange" data-index="{{index}}">
                        <label class="weui-cell weui-check__label" wx:for="{{item.zhuangtai}}" wx:for-item="value" wx:key="{{value}}"  data-seleindex="{{item.ID}}">

                        <view class="weui-cell__hd">
                              <radio value="{{value.type}}" />
                        </view>
                        <view class="weui-cell__bd">{{value.value}}</view>
                        </label>
                        </radio-group>
                  </view>
          </view>
          <button type="primary" bindtap="handleOk">确定</button>
      </view>

js:

const app = getApp()
Page({
  data: {
    ITEMSLIST: [{FDMJ: 131.11,
      FDPS: 1,
      FJ: "/common/Pdf/BE7BA11245BB43BE96C4790773796633.pdf",
      ID: "d5c0b96b-4949-4f37-9c3c-558251a180bf",
      TITLE: "1.《学林博雅天城业主委员会工作规则》(草拟稿)",
      zhuangtai:[{value: '同意',type:1,ischecked:false,},{value: '反对',type:2,ischecked:false,},{value: '弃权',type:3,ischecked:false,}]},
      {FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/DEE42E735F6F471DBCA176F3EBBACA0B.pdf",
      ID: "3c93f40a-15e0-472e-99a5-5fe6c8cd00fc",
      TITLE: "2.《学林博雅天城业主大会议事规则》(草拟稿)",
      zhuangtai:[{value: '同意',type:1,ischecked:false,},{value: '反对',type:2,ischecked:false,},{value: '弃权',type:3,ischecked:false,}]
    },{FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/10B2374EC91642CC8138EABACFBFACDB.pdf",
      ID: "e087d4a0-16ec-4437-9629-71427117f981",
      TITLE: "3.《学林博雅天城管理规约》",
      zhuangtai:[{value: '同意',type:1,ischecked:false,},{value: '反对',type:2,ischecked:false,},{value: '弃权',type:3,ischecked:false,}]
    },
      {FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/234FEBF60BEB4F37B78F2320A78E652C.pdf",
      ID: "99716da1-4523-4c24-aa9f-d5fbf2f66f36",
      TITLE: "4.《学林博雅天城主委员会选举办法》",
      zhuangtai:[{value: '同意',type:1,ischecked:false,},{value: '反对',type:2,ischecked:false,},{value: '弃权',type:3,ischecked:false,}]}],
      GYJSON:"[{'id':'3c93f40a-15e0-472e-99a5-5fe6c8cd00fc','TYPE':1},{'id':'99716da1-4523-4c24-aa9f-d5fbf2f66f36','TYPE':1},{'id':'d5c0b96b-4949-4f37-9c3c-558251a180bf','TYPE':2},{'id':'e087d4a0-16ec-4437-9629-71427117f981','TYPE':3}]"
  },
  //点击每个题的选项
  radioChange(e) {
    console.log(e)
    let parendindex = e.currentTarget.dataset.seleindex  //父亲id
    const items = this.data.ITEMSLIST[e.currentTarget.dataset.index].zhuangtai
    for (let i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value === e.detail.value
      this.data.ITEMSLIST[e.currentTarget.dataset.index].istype = e.detail.value
    }
    
    let arr = []
    this.data.ITEMSLIST.forEach(items => {
      arr.push({
        id: items.ID,
        TYPE: items.istype
      })
    })
    this.setData({
      isarr: arr
    })
  },
  //点击确定
  handleOk(){
    if(this.data.isarr.length == 4){
      console.log(this.data.isarr)
    }
    
  }
})
  

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序源码(含截图)题库:选择选项,切换至下一题微信小程序
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值