文章目录

实现效果
- 界面功能
- 数据功能
各个组件的实现
- 右上角的蓝色加号
- 问卷结构部分
- 以单选部分举例
- - 每个题型的灰色加号
  - 每个题型的删除按钮
  - 每个选项的删除按钮
  - 每个输入的数据记录
全部代码
- questionnaire.wxml
- questionnaire.wxss
- questionnaire.js
PS

回答问卷的部分参考微信小程序做问卷——前端部分（回答问卷）

实现效果

界面功能

最后实现的界面如下

最右上角的蓝色加号是增加一种新的题型，一共三种题型，单选，多选，问答。

选择一种题型之后，点击确定，会下页面的下面生成一个新的题型。比如选择多选：
一开始是三种题型，单选，多选和问答，现在变成四个题目了。

这些textarea里面的值都是默认设置的，所以新加的时候也会带有默认值，这是为了方便调试用的，正式用的时候都置为空就可以。

每个题型有个灰色加号（问答题没有），点击加号会增加该题型选项数量，比如在第二题再添加一项

在灰色加号后面还要一个红底白叉，表示删除这一个题型，比如删除第三个，那么第四个就会自动变成第三个

如果选择每个题型的的选项后面的蓝色减号，那么就会删除这一项，比如删除Q2的第一项OK：

由于使用的是textarea，所以是支持自动换行以及自适应高度的（虽然模拟器的适配很不好看，但是真机调试的话是没问题的）。

数据功能

因为页面最后是要生成发向服务端的，所以最后要生成一个数据。
设计的数据结构是（其中id是暂时用不到的）

    questionnaireArray : [{"type": "SCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },{ "id": 2, "name": "Java", "isSelected": true },{ "id": 3, "name": "C++", "isSelected": false }]}},{"type": "MCQ","content": {"description": "Which fruit do you like?","options":[{ "id": 1, "name": "OK", "isSelected": true },{ "id": 2, "name": "Java", "isSelected": false },{ "id": 3, "name": "C++", "isSelected": true }]}},{"type": "SAQ","content": {"description": "What's your name?","answer":"i dont know"}}],

最终要实现的目的就是，改变问卷中的值，点击下一步的时候，可以自动生成适配的数据结构。
看一下效果

接着上面的操作，点击下一步，直接打印出questionnaire，可以发现数据是设配的。
也可以改动每一项数据使得界面适配，比如在Q2的C++后面加几个哈哈哈，再点下一步，可以看到效果也是匹配的。

PS：只是为了展示功能，至于其他的小问题可以自己手动改，比如没有显示是单选还是多选，因为这是发布问卷的时候，而不是做问卷的时候，所以不需要出现radio和checkbox，但是内部数据还是记录着，为了方便，可以手动在wxml上面添加具体的类别，这里SCQ代表单选题，MCQ代表多选题，SAQ代表问答题。

各个组件的实现

右上角的蓝色加号

<picker value="{{newIndex}}" range='{{typeArray}}' bindchange="bindTypeChange"><image class='addNewQuestion' src='{{addIconPath}}'></image>
</picker>

picker是微信小程序支持的原生组件，效果就是之前展示的，可以在底部生成选项，然后点击确定。在js里面有对应的代码。
这是数据绑定部分

    typeArray: ['单选', '多选', '问答'],newIndex: 0,addIconPath: "../../../images/addIcon.png",

这是逻辑部分

bindTypeChange:function(e){this.setData({newIndex: e.detail.value});console.log(e.detail.value);var tempArray = this.data.questionnaireArray;if(this.data.newIndex == 0){var temp0 = {"type": "SCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },]}};tempArray.push(temp0);}else if (this.data.newIndex == 1){var temp0 = {"type": "MCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },]}};tempArray.push(temp0);}else if (this.data.newIndex == 2){var temp0 = {"type": "SAQ","content": {"description": "Which fruit do you like best?",}};tempArray.push(temp0);}this.setData({questionnaireArray: tempArray,});},

在点击确定的时候会触发bindchange函数，该函数首先通过e.detail.value改掉newIndex的值,来记录当前选中的是第几个选项，所有的数据修改都在this.setData({})中，这样变化会显示在界面中，还可以用this.data =这样的方式赋值，但是不会影响到界面，反而造成数据不一致性，所以不能这样用。得到newIndex之后通过该值判断，如果是0就生成单选题，如果是1就生成多选题，如果是2就生成问答题。通过var tempArray = this.data.questionnaireArray;取得中间变量，然后对中间变量操作，操作完再赋值回去，该项目的所有的改变数据的逻辑都遵循该逻辑，即先取中间变量，对中间变量操作，将中间变量赋值回去。

问卷结构部分

整体框架如下，其中questionnaireArray，就是整个问卷的数据，生成的页面其实是数据驱动的，通过改变数据自动生成问卷，而不是在js端生成wxml，所以只需要专注于数据即可。通过wx:for和wx:if自动循环数据生成.

当然我这里是二重循环，所以比一重循环更复杂一点,最后的结构是

以单选部分举例

由于单选和多选类似，而问答部分只涉及一重循环，所以只说单选部分。单选部分的结果如下：

  <block wx:if="{{item.type === 'SCQ'}}"><view class = 'SCQ' data-id='{{fatherIndex}}'><view class='SCQTitle'><view class='SCQQ'>Q</view><view class='SCQindex'>{{fatherIndex+1}}</view><view class='SCQquto'>:</view><textarea auto-height='true' class='SCQDiscription' value='{{item.content.description}}' bindblur='bindblurSCQ' data-id='{{fatherIndex}}'></textarea><image class='SCQaddIcon1' src='{{addIconPath1}}' mode='widthFix' catchtap='addSCQ' data-id='{{fatherIndex}}'></image><image class='SCQdeleteIcon1' src='{{deletePath1}}' mode='widthFix' catchtap='deleteSCQ' data-id='{{fatherIndex}}'></image></view><view class='SCQOption' wx:for="{{item.content.options}}" wx:key="SCQID" data-id='{{fatherIndex}}' bindtouchstart='getTempFatherIndex'><!-- <image class='SCQselectIcon' src="{{item.isSelected?'../../../images/SAQ2.png':'../../../images/SAQ1.png'}}" mode='widthFix'></image> --><textarea auto-height='true' value='{{item.name}}' class='SCQText' bindblur='bindblurOneOfSCQ' data-id='{{index}}'></textarea><image class='SCQdeleteIcon' src='{{deletePath}}' mode='widthFix' data-id='{{index}}' catchtap='deleteOneOfSCQ'></image></view></view></block>

其中有行image被注释掉了，那是显示是否被选中的，由于在填问卷的时候会直接使用微信小程序的控件radio-group以及checkbox-group,会自带图标，以及多选和单选的功能，所以这里就不加了，可以展示一下没有被注释的效果：

注意到有这样的语句data-id='{{fatherIndex}}'，这是为该元素设置一个id，方便js找到具体的元素，由于在外层的循环中设置了wx:for-index='fatherIndex'，所以下面再用fatherIndex的时候就是该值，如果不设置的话默认是index，wx:for默认的两个属性是index以及item,分别代表默认序号和对应的元素，而这个序号是根据数组中的位置变化的，比如已经有了4个元素编号从0-3，这时候删除第三个那么序号会变成0-2，而不是变成0，1，3。利用这种特性，删除的时候会方便很多。

每个题型的灰色加号

<image class='SCQaddIcon1' src='{{addIconPath1}}' mode='widthFix' catchtap='addSCQ' data-id='{{fatherIndex}}'></image>

mode='widthFix',是根据宽度自适应大小。
catchtap是点击事件，没有用bindtap，这里牵扯到冒泡的问题，冒泡的意思就是父级元素和子元素都绑定了按键函数，这时候点击子元素，事件会像冒泡一样向上级传递，所以会先调用子元素函数，再调用父元素函数，如果不冒泡就用catchtap，冒泡就用bindtap

  addSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;var tempSCQ = { "id": 1, "name": "Lua", "isSelected": false };console.log(tempIndex);tempArray[tempIndex].content.options.push(tempSCQ);this.setData({questionnaireArray: tempArray,});},

重点是addSCQ这个函数,实现的功能是点击灰色加号，会自动生成新的选项。所以首要的是获得当前点击的元素，通过var tempIndex = input.currentTarget.dataset.id;拿到id，这里的id和data-id='{{fatherIndex}}'是对应的，拿到id之后再push一项进去，最后再赋值就可以了，由于是加在子元素的最后的一个，所以直接push，而不用知道放在第几个，所以只涉及到一重循环。

每个题型的删除按钮

        <image class='SCQdeleteIcon1' src='{{deletePath1}}' mode='widthFix' catchtap='deleteSCQ' data-id='{{fatherIndex}}'></image>

类似增加按钮

  deleteSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;console.log(tempIndex);var tempArray = this.data.questionnaireArray;tempArray.splice(tempIndex, 1);this.setData({questionnaireArray: tempArray,});},

删除的时候用splice函数，第一个参数是删除的起始地址，第二个参数是从起始地址开始删除的个数，由于只删除一个，所以写1.

每个选项的删除按钮

      <view class='SCQOption' wx:for="{{item.content.options}}" wx:key="SCQID" data-id='{{fatherIndex}}' bindtouchstart='getTempFatherIndex'><textarea auto-height='true' value='{{item.name}}' class='SCQText' bindblur='bindblurOneOfSCQ' data-id='{{index}}'></textarea><image class='SCQdeleteIcon' src='{{deletePath}}' mode='widthFix' data-id='{{index}}' catchtap='deleteOneOfSCQ'></image>

这部分最为复杂，因为涉及二重循环。当然是可以通过fatherIndex和index获取父级索引以及子级索引，但是实际上是办不到的，因为我如果点击删除按钮，那么只能拿到子级的索引，是无法访问到父级的索引的，而冒泡的时候是先子级，再父级，但是这与逻辑不符合，一定是要先拿到父级索引再拿到子级索引，一般二重循环都是这样取得特定的元素的，所以我想到一个办法，就是在父级的时候绑定的函数要在catchtap之前触发就可以了，在通过设置全局变量的方法就可以得到父级索引。而bindtouchstart在catchtap之前调用，所以就完成了目标。

  getTempFatherIndex:function(input){var tempFatherIndex = input.currentTarget.dataset.id;console.log('currentFatherIndex: ' + tempFatherIndex);this.setData({currentFatherIndex: tempFatherIndex,});},

在每次点击的时候都会拿到currentFatherIndex索引，可以在子元素中调用

  deleteOneOfSCQ:function(input){var tempFatherIndex = this.data.currentFatherIndex;var tempSonIndex = input.target.dataset.id;//console.log(tempSonIndex);var tempArray = this.data.questionnaireArray;//console.log(tempArray[tempFatherIndex].content.options[tempSonIndex]);tempArray[tempFatherIndex].content.options.splice(tempSonIndex,1);this.setData({questionnaireArray: tempArray,});},

这里的var tempFatherIndex = this.data.currentFatherIndex;就是父级的{{fatherIndex}},而var tempSonIndex = input.target.dataset.id;就是自身的内部循环的{{index}}，所以可以定位到二重循环内部的元素。

每个输入的数据记录

        <textarea auto-height='true' class='SCQDiscription' value='{{item.content.description}}' bindblur='bindblurSCQ' data-id='{{fatherIndex}}'></textarea>

最后还需要把数据传给服务端，所以改动后的数据要直接改变数据，{{}}这个符号只能实现单项绑定，数据到页面的绑定，js数据改变，页面也跟着改变，但是页面改变并不能改变js中的数据，所以自己还要写函数自己改变。
bindblur就是在<textarea>，不再聚焦的时候调用，简而言之就是先点击了textarea,此时为聚焦状态，这时候再点击其他地方，就称为不在聚焦，而这个函数就是在此时调用，如果在改完数据，直接点击下一步也是可以的，因为会先调用bindblur，然后才会调用下一步按钮绑定的事件函数。

  bindblurSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempIndex].content.description = input.detail.value;this.setData({questionnaireArray: tempArray,});},

类似之前的操作，直接改变数据即可。

全部代码

questionnaire.wxml

  <view id="title"><text>标题:</text><input class='titleContent' value='描述概况'></input></view><!-- <view class="divLine"></view> --><view id="request"><textarea  class='requestContent' value='要求：描述任务详情'></textarea ></view><!-- <view class="divLine"></view> --><picker value="{{newIndex}}" range='{{typeArray}}' bindchange="bindTypeChange"><image class='addNewQuestion' src='{{addIconPath}}'></image>
</picker><view id = 'body' wx:for="{{questionnaireArray}}" wx:key="id" wx:for-index='fatherIndex'><block wx:if="{{item.type === 'SCQ'}}"><view class = 'SCQ' data-id='{{fatherIndex}}'><view class='SCQTitle'><view class='SCQQ'>Q</view><view class='SCQindex'>{{fatherIndex+1}}</view><view class='SCQquto'>:</view><textarea auto-height='true' class='SCQDiscription' value='{{item.content.description}}' bindblur='bindblurSCQ' data-id='{{fatherIndex}}'></textarea><image class='SCQaddIcon1' src='{{addIconPath1}}' mode='widthFix' catchtap='addSCQ' data-id='{{fatherIndex}}'></image><image class='SCQdeleteIcon1' src='{{deletePath1}}' mode='widthFix' catchtap='deleteSCQ' data-id='{{fatherIndex}}'></image></view><view class='SCQOption' wx:for="{{item.content.options}}" wx:key="SCQID" data-id='{{fatherIndex}}' bindtouchstart='getTempFatherIndex'><!-- <image class='SCQselectIcon' src="{{item.isSelected?'../../../images/SAQ2.png':'../../../images/SAQ1.png'}}" mode='widthFix'></image> --><textarea auto-height='true' value='{{item.name}}' class='SCQText' bindblur='bindblurOneOfSCQ' data-id='{{index}}'></textarea><image class='SCQdeleteIcon' src='{{deletePath}}' mode='widthFix' data-id='{{index}}' catchtap='deleteOneOfSCQ'></image></view></view></block><block wx:if="{{item.type === 'MCQ'}}"><view class = 'MCQ' data-id='{{fatherIndex}}'><view class='MCQTitle'><view class='MCQQ'>Q</view><view class='MCQindex'>{{fatherIndex+1}}</view><view class='MCQquto'>:</view><textarea auto-height='true' class='MCQDiscription' value='{{item.content.description}}' data-id='{{fatherIndex}}' bindblur='bindblurMCQ'></textarea><image class='MCQaddIcon1' src='{{addIconPath1}}' mode='widthFix' bindtap='addMCQ' data-id='{{fatherIndex}}'></image><image class='MCQdeleteIcon1' src='{{deletePath1}}' mode='widthFix' bindtap='deleteMCQ' data-id='{{fatherIndex}}'></image></view><view class='MCQOption' wx:for="{{item.content.options}}" wx:key="MCQID" data-id='{{fatherIndex}}' bindtouchstart='getTempFatherIndex'><!-- <image class='MCQselectIcon' src="{{item.isSelected?'../../../images/MAQ2.png':'../../../images/MAQ1.png'}}" mode='widthFix'></image> --><textarea auto-height='true' class='MCQText' value='{{item.name}}' data-id='{{index}}' bindblur='bindblurOneOfMCQ'></textarea><image class='MCQdeleteIcon' src='{{deletePath}}' mode='widthFix' catchtap='deleteOneOfMCQ' data-id='{{index}}'></image></view></view></block><block wx:if="{{item.type === 'SAQ'}}"><view class = 'SAQ' data-id='{{fatherIndex}}'><view class='SAQTitle'><view class='SAQQ'>Q</view><view class='SAQindex'>{{fatherIndex+1}}</view><view class='SAQquto'>:</view><textarea auto-height='true' class='SAQDiscription' value='{{item.content.description}}' data-id='{{fatherIndex}}' bindblur='bindblurSAQ'></textarea><image class='SAQdeleteIcon' src='{{deletePath1}}' mode='widthFix' bindtap='deleteSAQ' data-id='{{fatherIndex}}'></image></view><textarea auto-height='true' class = "SAQAnswer" value='{{item.content.answer}}' bindblur='bindblurAnswerOfSAQ' data-id='{{fatherIndex}}'></textarea></view></block>
</view><button class="weui-btn" type="primary" bindtap='showQ'>下一步</button>

questionnaire.wxss

page{height: 100%;
}/* .divLine{background: #E0E3DA;width: 100%;height: 5rpx;margin-top: 20rpx;
} */.addNewQuestion{position: fixed;width: 80rpx;height: 80rpx;right: 20rpx;top:20rpx;
}#title{height: 10%;display: flex;flex-direction: row;color:#D4D4D4;
}#request{height: 15%;color:#D4D4D4;border: 1rpx solid #999;
}.SCQselectIcon{width: 60rpx;
}.SCQOption{display: flex;flex-direction: row;margin-top: 20rpx;align-items: center;
}.MCQselectIcon{width: 60rpx;
}
.SCQ{padding: 20rpx;border: 2rpx dashed #999;
}
.SCQText{margin-left: 20rpx;/* color: #E3E3E3; */border: 2rpx solid #999;width: 80%;
}
.MCQ{padding: 20rpx;border: 2rpx dashed #999;
}.MCQText{margin-left: 20rpx;/* color: #E3E3E3; */border: 2rpx solid #999;width: 80%;
}.SAQ{padding: 20rpx;border: 2rpx dashed #999;
}.SCQTitle{display: flex;flex-direction: row;
}.MCQTitle{display: flex;flex-direction: row;
}.SAQTitle{display: flex;flex-direction: row;
}.MCQOption{display: flex;flex-direction: row;margin-top: 20rpx;align-items: center;
}.SAQAnswer{border: 2px solid #999;
}.SCQDiscription{border: 2rpx solid #999;width: 70%;
}.MCQDiscription{border: 2rpx solid #999;width: 70%;
}.SAQDiscription{border: 2rpx solid #999;width: 70%;
}.SCQdeleteIcon{width: 80rpx;margin-left: 20rpx;
}.MCQdeleteIcon{width: 80rpx;margin-left: 20rpx;
}.SCQdeleteIcon1{width: 60rpx;margin-left: 20rpx;
}.MCQdeleteIcon1{width: 60rpx;margin-left: 20rpx;
}.SAQdeleteIcon{width: 60rpx;margin-left: 50rpx;
}.SCQaddIcon1{width:60rpx;margin-left: 20rpx;
}.MCQaddIcon1{width:60rpx;margin-left: 20rpx;
}#body{margin-top: 100rpx;
}.weui-btn{width: 50%;margin-bottom: 20rpx;
}

questionnaire.js

Page({/*** 页面的初始数据*/data: {addIconPath1:'../../../images/addIcon1.png',deletePath: '../../../images/delete.png',deletePath1: '../../../images/cancel.png',typeArray: ['单选', '多选', '问答'],newIndex: 0,addIconPath: "../../../images/addIcon.png",currentFatherIndex : 0,questionnaireArray : [{"type": "SCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },{ "id": 2, "name": "Java", "isSelected": true },{ "id": 3, "name": "C++", "isSelected": false }]}},{"type": "MCQ","content": {"description": "Which fruit do you like?","options":[{ "id": 1, "name": "OK", "isSelected": true },{ "id": 2, "name": "Java", "isSelected": false },{ "id": 3, "name": "C++", "isSelected": true }]}},{"type": "SAQ","content": {"description": "What's your name?","answer":"i dont know"}}],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},bindTypeChange:function(e){this.setData({newIndex: e.detail.value});console.log(e.detail.value);var tempArray = this.data.questionnaireArray;if(this.data.newIndex == 0){var temp0 = {"type": "SCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },]}};tempArray.push(temp0);}else if (this.data.newIndex == 1){var temp0 = {"type": "MCQ","content": {"description": "Which fruit do you like best?","options":[{ "id": 1, "name": "Lua", "isSelected": false },]}};tempArray.push(temp0);}else if (this.data.newIndex == 2){var temp0 = {"type": "SAQ","content": {"description": "Which fruit do you like best?",}};tempArray.push(temp0);}this.setData({questionnaireArray: tempArray,});},deleteSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;console.log(tempIndex);var tempArray = this.data.questionnaireArray;tempArray.splice(tempIndex, 1);this.setData({questionnaireArray: tempArray,});},deleteMCQ:function(input){var tempIndex = input.currentTarget.dataset.id;console.log(tempIndex);var tempArray = this.data.questionnaireArray;tempArray.splice(tempIndex, 1);this.setData({questionnaireArray: tempArray,});},deleteSAQ:function(input){var tempIndex = input.currentTarget.dataset.id;console.log(tempIndex);var tempArray = this.data.questionnaireArray;tempArray.splice(tempIndex, 1);this.setData({questionnaireArray: tempArray,});},getTempFatherIndex:function(input){var tempFatherIndex = input.currentTarget.dataset.id;console.log('currentFatherIndex: ' + tempFatherIndex);this.setData({currentFatherIndex: tempFatherIndex,});},deleteOneOfSCQ:function(input){var tempFatherIndex = this.data.currentFatherIndex;var tempSonIndex = input.target.dataset.id;//console.log(tempSonIndex);var tempArray = this.data.questionnaireArray;//console.log(tempArray[tempFatherIndex].content.options[tempSonIndex]);tempArray[tempFatherIndex].content.options.splice(tempSonIndex,1);this.setData({questionnaireArray: tempArray,});},deleteOneOfMCQ:function(input){var tempFatherIndex = this.data.currentFatherIndex;var tempSonIndex = input.target.dataset.id;// console.log('tempFatherIndex: ' + tempFatherIndex);// console.log('tempSonIndex: ' + tempSonIndex);var tempArray = this.data.questionnaireArray;// console.log(tempArray[tempFatherIndex].content.options[tempSonIndex]);tempArray[tempFatherIndex].content.options.splice(tempSonIndex, 1);this.setData({questionnaireArray: tempArray,});},addSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;var tempSCQ = { "id": 1, "name": "Lua", "isSelected": false };console.log(tempIndex);tempArray[tempIndex].content.options.push(tempSCQ);this.setData({questionnaireArray: tempArray,});},addMCQ: function (input) {var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;var tempMCQ = { "id": 1, "name": "Lua", "isSelected": false };console.log(tempIndex);tempArray[tempIndex].content.options.push(tempMCQ);this.setData({questionnaireArray: tempArray,});},showQ:function(){console.log(this.data.questionnaireArray);},bindblurSCQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempIndex].content.description = input.detail.value;this.setData({questionnaireArray: tempArray,});},bindblurOneOfSCQ:function(input){var tempFatherIndex = this.data.currentFatherIndex;var tempSonIndex = input.target.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempFatherIndex].content.options[tempSonIndex].name = input.detail.value;this.setData({questionnaireArray: tempArray,});},bindblurMCQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempIndex].content.description = input.detail.value;this.setData({questionnaireArray: tempArray,});},bindblurOneOfMCQ:function(input){var tempFatherIndex = this.data.currentFatherIndex;var tempSonIndex = input.target.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempFatherIndex].content.options[tempSonIndex].name = input.detail.value;this.setData({questionnaireArray: tempArray,});},bindblurSAQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempIndex].content.description = input.detail.value;this.setData({questionnaireArray: tempArray,});},bindblurAnswerOfSAQ:function(input){var tempIndex = input.currentTarget.dataset.id;var tempArray = this.data.questionnaireArray;tempArray[tempIndex].content.answer = input.detail.value;// console.log(tempArray[tempIndex].content);this.setData({questionnaireArray: tempArray,});},
})

PS

在模拟器上的效果不太好，鼠标点不到地方，textarea效果也很差，但是在真机上都是没有问题的。另外questionnaire.wxml文件用到的样式不光都在questionnaire.wxss中,因为会用到WeUI中的样式，所以还会用到下面官方的样式，直接放在全局即可。

/*!* WeUI v1.1.1 (https://github.com/weui/weui-wxss)* Copyright 2017 Tencent, Inc.* Licensed under the MIT license*/
page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999}.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block}.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em}.weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341}.weui-cell_switch{padding-top:6px;padding-bottom:6px}.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}.weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em}.weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em}.weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}.weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px}.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none}.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0}.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}.weui-navbar__item.weui-bar__item_on{color:#1aad19}.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch}.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}

微信小程序做问卷——前端部分(生成问卷)相关推荐

微信小程序做问卷——前端部分(回答问卷)
文章目录实现效果实现单选部分多选部分问答部分全部代码 item.wxml item.wxss item.js 生成问卷的部分参考微信小程序做问卷--前端部分(生成问卷) 实现效果界面如 ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
[小记] 微信小程序 - 人脸识别前端（一）初体验
微信小程序 - 人脸识别前端(一)初体验记录尝试使用拍照模式进行人脸比对的过程-此方式有一定缺陷:调用系统摄像头,会保留照片于系统相册等功能:人脸识别 + 打卡签到说明:前端仅做拍照和转码操作等 ...
微信‘小程序’： web前端的春天 or 噩梦?
最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了喵了咪的,点到哪里都是这个报道和新闻最近因为工作和生活略忙,爱吹文章的我,更新频率也低了,在这里抱个歉,希望大家理解和包容,希望&q ...
微信小程序与web前端的区别
1 引言刚接触小程序,会有很多错误的思路去编写,为了避免在代码方面出错,本文将对前端和小程序做一个区分. 2 问题描述微信小程序与web前端的区别. 3 算法描述在web的html中我们一般都是 ...
微信小程序——个人相册（前端）
微信小程序--个人相册(前端) 项目效果图 1.项目功能 1)用户管理,信息包括:头像.昵称,功能包括:获取微信用户信息.验证用户是否存在.修改头像.修改昵称 2)上传相片:上传图片 3)照册列表:封 ...
python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...
微信小程序受到了广大用户的使用和喜爱,这种不用下载的应用,让人们能更快的开启和关闭应用,不用担心自己的内存不够.那么今天我们来了解下,个人的微信小程序做店铺收费吗?要收多少? 现在许多用了许多小程序了 ...
微信小程序做店铺收费吗？【微信小程序店铺】
很多商家企业现在都已经有自己的微信小程序店铺了,还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺,那么对于他们来说,除了要知道怎么做微信小程序店铺,还需要了解微信小程序做店铺收费吗这个 ...
微信小程序：爱情保证书制作生成
这是一款开启保证数生成制作的一款小程序支持一键生成情侣爱情保证图只需输入你和另一半姓名,再加上时间即可一键生成然后长按就可以保存了安装方法: 使用微信开发者工具打开源码然后提交上传审核就可 ...

微信小程序做问卷——前端部分(生成问卷)