小程序 笔记11.15

课堂学习:添加数据 和 搜索

一、双向绑定

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

    })

  }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容