想要的效果
1.第一頁只顯示第一道題的內容,如圖紅框
2.答題后，點擊下一題，內容顯示第二道題的內容
代碼
answer.wxml
<!--pages/answer/answer.wxml-->
<view class="app-answer">
<view class="answer-header">
<view class="header-title">全民答題</view>
<view class="header-number">總共1/10題</view>
</view>
<view class="answer-body">
<view wx:for="{{array}}" wx:key="id">
{{index+1}}: {{item.title}}
<view wx:for="{{item.select}}" wx:for-item="select" wx:key="id">
<view>{{select.content}}</view>
</view>
</view>
</view>
<view class="answer-footer">
<button type="default" bindtap="prevAnswer">上一題</button>
<button type="default" bindtap="prevAnswer">下一題</button>
<!-- <text bindtap="nextAnswer">下一題</text> -->
</view>
</view>
answer.js
// pages/answer/answer.js
Page({
/**
* 頁面的初始數據
*/
data: {
array: [{
id: 1,
title: '1+1=?',
select: [{
id: 1,
content: "選項一"
}, {
id: 2,
content: "選項二"
}, {
id: 3,
content: "選項三"
}, {
id: 4,
content: "選項四"
}]
}, {
id: 2,
title: '2+2=?',
select: [{
id: 1,
content: "選項一"
}, {
id: 2,
content: "選項二"
}, {
id: 3,
content: "選項三"
}, {
id: 4,
content: "選項四"
}]
}, {
id: 3,
title: '3+3=?',
select: [{
id: 1,
content: "選項一"
}, {
id: 2,
content: "選項二"
}, {
id: 3,
content: "選項三"
}, {
id: 4,
content: "選項四"
}]
}]
},
nextAnswer: function () {
wx.showToast({
title: '已答，跳轉到下一題',
icon: 'success',
duration: 2000
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})本文轉載於:猿2048微信小程序答題，怎么設計頁面渲染，答完一題，跳到下一題