微信小程序答题，怎么设计页面渲染，答完一题，跳到下一题

想要的效果

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