评论

我写的答题类小程序的几个技术点(之三)js代码

本篇是关于学习页面的js代码。

本篇是学习页面的js代码

首先呈上我的公众号,敬请关注,我们一起交流:

data: {
//页面右上角显示选择的题号
tihaox:1,

jieguo: [{ _id: "X_5ee", ans: "", tigan: "", tihao: 1 }],
daan:[{ _id: "X_5ee", ans: "", tigan: "", tihao: 1 }] ,

//页面左上角显示选择的题库
tikuxianshi:null,

//页面初次渲染,学习第一题时,上一题button无效状态,下一题有效,答案不显示
predisabled:true,
nextdisabled:false,
hidden:true,

timushu:null,

tempt:1

},

//拖动slider选题
sliderchange:function(e){
console.log(e.detail.value)
this.setData({
tihaox:e.detail.value,
tempt:e.detail.value
})

//判断 上一题button按钮,是否可用状态
if (e.detail.value > 1) {
this.setData({
predisabled: false
})
}
else {
this.setData({
predisabled: true
})
}

//判断 下一题button按钮,是否可用状态
if (e.detail.value < 200) {
this.setData({
nextdisabled: false
})
}
else {
this.setData({
nextdisabled: true
})
}
this.chaxun(e.detail.value)
},

chaxun:function(e){
//用wx.getStorage,通过本地缓存进行了页面间传值,传来了所选题库的值
//toString()方法,把数字转换为字符串
var tiku = wx.getStorageSync(‘tikuzhi’).toString();
var tk=‘gx’+tiku;
const db = wx.cloud.database()
var that=this
db.collection(tk).where({
//数据库中查询tihao字段等于e.detail.value选择的结果
tihao:e,
})
.get({
success(res) {
// res.data 是包含以上定义的记录的数组
console.log(res.data)
that.setData({
//不显示答案
hidden:true,
//刷新新查询的题目和答案,上一行代码设置答案暂不显示
jieguo:res.data,
daan:res.data
})

   }
})

},

//上一题button
prequestion: function (e) {
var a=this.data.tempt-1;

if (a > 1) {
  this.setData({
    predisabled: false
  })
}
else {
  this.setData({
    predisabled: true
  })
}

this.chaxun(a)
this.setData({
  tihaox: a,
  tempt:a,
  //点击上一题button后,下一题button就应该成为有效状态
  nextdisabled: false
})

},

//下一题 button
nextquestion:function(e){

var b = this.data.tempt +1;

//重新查询、渲染下一题
this.chaxun(b)

//更新右上角题号,更新当前选定的是第几题
this.setData({
  tihaox: b,
  tempt: b,
  //点击下一题button后,上一题button就应该成为有效状态
  predisabled: false
})

//控制下一题button的无效状态
if (b < 200) {
  this.setData({
    nextdisabled: false
  })
}
else{
  this.setData({
    nextdisabled: true
  })
}

},

//题库共有多少题
timushu: function () {

var tiku = wx.getStorageSync('tikuzhi').toString();
var tk = 'gx' + tiku;

const db = wx.cloud.database()
var that = this

db.collection(tk).count({
  success(res) {
    console.log(res.total)
    that.setData({
      timushu: res.total
    })
  }
})

},

//显示答案 button
showanswer:function(e){
this.setData({
hidden:false
})

},

onLoad: function (options) {
var tiku2 = wx.getStorageSync(‘tikuzhi’);
this.setData({
tikuxianshi:tiku2
})
this.timushu()
this.chaxun(1)

},

点赞 0
收藏
评论

3 个评论

  • 老张
    老张
    2019-06-19

    随便看了一下代码,写法还需要精减。比如:


    if (e.detail.value < 200) {
    this.setData({
    nextdisabled: false
    })
    }
    else {
    this.setData({
    nextdisabled: true
    })
    }
    this.chaxun(e.detail.value)
    },


    写成:

    this.setData({nextdisabled:e.detail.value < 200?false:true})

    2019-06-19
    赞同 3
    回复
  • 溢
    2019-07-24

    老张、小螺丝说的对

    2019-07-24
    赞同
    回复
  • 小螺丝
    小螺丝
    2019-06-19

    老张说的对。

    2019-06-19
    赞同
    回复
登录 后发表内容