课堂学习：添加数据 和 搜索
一、双向绑定
model:value = '{{XXX}}'
wxml里的内容会和js中的同步
<input class="txt" model:value='{{title}}'></input>
js中 data: { title:''},两者双向绑定 title的值发生改变 则表单中的值也会同步改变
二、picker 从底部弹起的滚动选择器
<!-- 选择器组件 range-key属性指定选择器中显示的内容 range属性指定一个数组-->
<picker bindchange="bindPickerChange" range-key ='Name' range="{{sections}}">
<view class="picker">
<!-- 根据选择器选中的索引，显示对应的名称 -->
{{sections[sectionsActiveIndex].Name}}
</view>
</picker>
三、添加数据方法
Page({
/**
* 页面的初始数据
*/
data: {
//分类信息的数组
scetions:[],
//选中的分类项目的下标
sectionsActiveIndex:0,
//题目标题
title: '',
//分类id
section_id: 0,
//答案
answer: '',
//解析
desc: ''
},
//分类选择器改变选项方法
bindPickerChange: function(e) {
console.log(e)
console.log(e.detail.value)
//获取分类的下标
let index = e.detail.value
this.data.section_id = this.data.sections[index].Id
//更新选中的下标
this.setData({
sectionsActiveIndex : index
})
},
//加载课程分类信息的方法
async loadSectioins() {
//发送请求获取所有的课程分类
let data = await wx.$get('Section/GetSections')
//添加一个课程分类
let first = {Id:0,Name:'请选择'}
//将添加的分类添加到数组的第一位
data.unshift(first)
console.log(data)
//渲染页面 把获取到的data给sections数组
this.setData({
sections: data
})
},
//添加题目的方法
async addSubject() {
console.log(this.data.title)
//如果 非空验证失败 这里取反了 所以是truth 直接返回
//根据下方所写的代码 如果有内容为空 则checkInput返回的是 true 取反就是false 直接返回 如果有内容 则checkInput返回truth 取反后为false 便不执行return
if(!this.checkInput()) {
return
};
let {title,section_id,answer,desc} = this.data
//提交用post
let r = await wx.$post('Subject/AddSubject', {
// title: this.data.title,
title:title,
// section_id: this.data.section_id,
section_id :section_id,
// answer: this.data.answer,
answer : answer,
// desc: this.data.desc
desc : desc
})
console.log(r)
if (r) {
wx.$msg('提交成功')
//清空页面
this.clear()
}
},
// 非空验证
checkInput(){
//如果他是空的 那就是truth 如果有值 取反就是false
if(!this.data.title){
wx.$msg('请输入标题')
}else if(this.data.section_id == 0){
wx.$msg('请选择分类')
}else if(!this.data.answer){
wx.$msg('请输入答案')
} else {
return true
}
return false
},
//清空数据的方法
clear() {
this.setData({
//清空表单数据
title: '',
section_id: 0,
answer: '',
desc: '',
//清空选择器索引
sectionsActiveIndex:0
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadSectioins()
}
})
四、搜索方法
<!-- 搜索区 -->
<view class="search">
<input placeholder='请输入搜索关键字' class="inp" model:value = '{{title}}' />
<view class="txt" bindtap="search" >搜索</view>
</view>
data: {
//课程题目数组
subjects: [],
pageIndex: 1,
pageSize: 10,
title: ''
},
//搜索方法
search() {
//将页码重新恢复成1
this.data.pageIndex = 1
//数组里面的数据要清空
this.data.subjects = []
//重新获取数据
this.loadSubjects()
},
//加载课程对应的题目信息的方法
async loadSubjects() {
let data = await wx.$get('Subject/GetSubjects', {
//页码
pageIndex: this.data.pageIndex,
//每页数量
pageSize: this.data.pageSize,
//data中加上一个参数 title 用于搜索方法使用 又this.data.title 和 搜索框input 的 value 双向绑定 所以可以根据搜索框的内容找title
title:this.data.title
})
if (data.length === 0) {
//如果获取不到数据了 就调用提示框的封装函数
wx.$msg('没有更多')
return
}
//把最新获取的数据追加到数组的后面
this.data.subjects.push(...data)
this.setData({
//这样是覆盖 每次页面加载都覆盖之前的
// subjects: data
subjects: this.data.subjects
})
}
