文章目錄
回答問卷的部分參考微信小程序做問卷——前端部分（回答問卷）
實現效果
界面功能
最後實現的界面如下
最右上角的藍色加號是增加一種新的題型，一共三種題型，單選，多選，問答。
選擇一種題型之後，點擊確定，會下頁面的下面生成一個新的題型。比如選擇多選：
一開始是三種題型，單選，多選和問答，現在變成四個題目了。
這些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}