微信小程序写选择题类型

曾经终败给现在 2022-12-16 06:06 141阅读 0赞

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

<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)
        }
        
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/57f395dfbebb414699cfde5f486e689b.png