課堂學(xué)習(xí)：添加數(shù)據(jù) 和 搜索
一、雙向綁定
model:value = '{{XXX}}'?
wxml里的內(nèi)容會和js中的同步
?<input?class="txt"?model:value='{{title}}'></input>
?js中 data:?{ title:''},兩者雙向綁定 title的值發(fā)生改變 則表單中的值也會同步改變
二奸披、picker 從底部彈起的滾動選擇器
?<!--?選擇器組件?range-key屬性指定選擇器中顯示的內(nèi)容?range屬性指定一個數(shù)組-->
????<picker?bindchange="bindPickerChange"?range-key?='Name'?range="{{sections}}">
??????<view?class="picker">
??????<!--?根據(jù)選擇器選中的索引缸榄，顯示對應(yīng)的名稱?-->
????????{{sections[sectionsActiveIndex].Name}}
??????</view>
????</picker>
三镜遣、添加數(shù)據(jù)方法
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{
????//分類信息的數(shù)組
????scetions:[],
????//選中的分類項(xiàng)目的下標(biāo)
????sectionsActiveIndex:0,
????//題目標(biāo)題
????title:?'',
????//分類id
????section_id:?0,
????//答案
????answer:?'',
????//解析
????desc:?''
??},
??//分類選擇器改變選項(xiàng)方法
??bindPickerChange:?function(e)?{
????console.log(e)
????console.log(e.detail.value)
????//獲取分類的下標(biāo)
????let?index?=?e.detail.value
????this.data.section_id?=?this.data.sections[index].Id
????//更新選中的下標(biāo)
????this.setData({
??????sectionsActiveIndex?:?index
????})
??},
??//加載課程分類信息的方法
??async?loadSectioins()?{
????//發(fā)送請求獲取所有的課程分類
????let?data?=?await?wx.$get('Section/GetSections')
????//添加一個課程分類
????let?first?=?{Id:0,Name:'請選擇'}
????//將添加的分類添加到數(shù)組的第一位
????data.unshift(first)
????console.log(data)
????//渲染頁面?把獲取到的data給sections數(shù)組
????this.setData({
??????sections:?data
????})
??},
??//添加題目的方法
??async?addSubject()?{
????console.log(this.data.title)
????//如果?非空驗(yàn)證失敗?這里取反了?所以是truth?直接返回
????//根據(jù)下方所寫的代碼?如果有內(nèi)容為空?則checkInput返回的是?true?取反就是false?直接返回??如果有內(nèi)容?則checkInput返回truth?取反后為false?便不執(zhí)行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()
????}
??},
??//?非空驗(yàn)證
??checkInput(){
????//如果他是空的?那就是truth??如果有值?取反就是false??
????if(!this.data.title){
??????wx.$msg('請輸入標(biāo)題')
????}else?if(this.data.section_id?==?0){
??????wx.$msg('請選擇分類')
????}else?if(!this.data.answer){
??????wx.$msg('請輸入答案')
????}?else?{
??????return?true
????}
????return?false
??},
??//清空數(shù)據(jù)的方法
??clear()?{
????this.setData({
??????//清空表單數(shù)據(jù)
??????title:?'',
??????section_id:?0,
??????answer:?'',
??????desc:?'',
??????//清空選擇器索引
??????sectionsActiveIndex:0
????})
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?(options)?{
????this.loadSectioins()
??}
})
四纳寂、搜索方法
<!--?搜索區(qū)?-->
<view?class="search">
??<input?placeholder='請輸入搜索關(guān)鍵字'?class="inp"?model:value?=?'{{title}}'?/>
??<view?class="txt"?bindtap="search"?>搜索</view>
</view>
??data:?{
????//課程題目數(shù)組
????subjects:?[],
????pageIndex:?1,
????pageSize:?10,
????title:?''
??},
??//搜索方法
??search()?{
????//將頁碼重新恢復(fù)成1
????this.data.pageIndex?=?1
????//數(shù)組里面的數(shù)據(jù)要清空
????this.data.subjects?=?[]
????//重新獲取數(shù)據(jù)
????this.loadSubjects()
??},
//加載課程對應(yīng)的題目信息的方法
??async?loadSubjects()?{
????let?data?=?await?wx.$get('Subject/GetSubjects',?{
??????//頁碼
??????pageIndex:?this.data.pageIndex,
??????//每頁數(shù)量
??????pageSize:?this.data.pageSize,
??????//data中加上一個參數(shù)?title?用于搜索方法使用?又this.data.title?和?搜索框input?的?value?雙向綁定?所以可以根據(jù)搜索框的內(nèi)容找title
??????title:this.data.title
????})
????if?(data.length?===?0)?{
??????//如果獲取不到數(shù)據(jù)了?就調(diào)用提示框的封裝函數(shù)
??????wx.$msg('沒有更多')
??????return
????}
????//把最新獲取的數(shù)據(jù)追加到數(shù)組的后面
????this.data.subjects.push(...data)
????this.setData({
??????//這樣是覆蓋?每次頁面加載都覆蓋之前的
??????//?subjects:?data
??????subjects:?this.data.subjects
????})
??}
