调查问卷微信小程序开发记录 vtab

开学了这一个月过得飞快，来到西电青岛住在家电齐全的loft公寓，不再限电让我开始了自己煮饭，浪费了大量时间在采购和家务上，健身房去的也少了，基本也就一个小时的样子。刷题没怎么刷，上上课，看前端的教程。
上周五被安排了开发小程序前端的活，实在没想到只有我一个人来做，推脱也没推脱掉还是加油干完吧，做事有始有终比较好，功能也比较简单，是满意度调查问卷。

这一周多遇到的问题来总计一波

一开始做基本的布局还算顺利，引入了一个vtabs组件和radio-group组件完成问题栏和答案框

之后一步需要获取到问题和答案并能传到后台，这里就有些阻碍了，

1. 点击问题的时候获取到问题： 一开始没什么思路把问题设置成上层view通关时间冒泡获取，可是这样用户去点问题也会把问题获取。问同学后知道正确的方法应该是想办法拿到当前问题的下标然后通过question[index]， 这个时候又遇到了难题
   也就是

如何获取div的下标index

通过这位的博客解决

wx:for-index=‘变量名（随便起）’，它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx=’{{变量名}}’，，该自定义属性可以在参数e下面打印出来）获取该下标。
但是data-index="{{index}}" 不能在wx:for-index的组件里，不然js传不进下标
–来自另一参考

 
<mp-vtabs vtabs="{{vtabs}}" activeTab="{{activeTab}}" bindchange = 'onChange'  bindtabclick="onTabCLick" class="test">
  <block   wx:key="title" wx:for="{{vtabs}}" > 
    <mp-vtabs-content tabIndex="{{index}}">
    <view class="vtabs-content-item"  > 
   
     <block wx:for = "{{vtabs[index].q}}"   wx:for-index= "id"   wx:key = "index" > 
     <!-- 引号里的变量名字可以自己取, 这里与上面区分改成id-->
     
         
        <view class="question"  data-question= "{{item}}"    >{{item}}
           <view class="grey"></view>

        <radio-group bindchange="listenerRadioGroup" data-id="{{id}}"  class="radio" >
 <!-- data-id 可以通过e下的参数拿到 -->
        <label  wx:for-items="{{evaluation}}"  wx:key = "index">

            <radio value="{{item.name}},{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
        </label> 
        </radio-group>
         
         </view>
 

       </block>  
       </view>
     
    </mp-vtabs-content>
   </block>
</mp-vtabs>
 

可以看出使用了两个下标，tab栏的下标在外层， 具体问题的下标在内层

  onTabCLick(e){
    let arr= new Array()
    const index = e.detail.index
    
    this.setData({index, index}) 
 
    console.log(this.data.index)
  },

  onChange(e){
   
    let index = e.detail.index
    
     this.setData({index, index}) 
  },


listenerRadioGroup: function (e) {
  let index = this.data.index
 
  var id = e.target.dataset.id// 对应wxml中的data-id 
  console.log("id: "+id, this.data.index)
  let vtab = this.data.vtabs[index]
  let record = this.data.vtabs[index].ans[id]
   
  record.push( {id:id,
    question: vtab.q[id],
    val:ans})
  console.log(this.data.vtabs)
  
  


}