想要的效果
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微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题