课堂学习：添加数据 和 搜索
一、双向绑定
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
????})
??}