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

想要的效果

1.第一页只显示第一道题的内容,如图红框
2.答题后,点击下一题,内容显示第二道题的内容

微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题_第1张图片

代码

answer.wxml


  
    全民答题 
    总共1/10题
  

  
  {{index+1}}: {{item.title}}
  
    {{select.content}}
  





  
  


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 () {

  }
})

你可能感兴趣的:(微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题)