首页数据交互

上一节，讲解了如何画页面，今天，讲讲如何进行互动，和数据进行交互。

在小程序基础开发文章中，有介绍说明页面的数据如何互动，那就是在js文件中，设置数据和方法。根据首页页面实际情况，搜索框，快捷按钮都需要互动。

先说搜索框，搜索框需要记录用户输入的内容，当按钮点击搜索，或者回车时，还需要根据用户输入的内容，去后台请求数据。

在index.js文件中，我们添加如下内容：

data: {
    artList: [],
    inputShowed: false,
    inputVal: "",
    keyword: "",
  },

还需要添加如下方法：


  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false,
      keyword: "",
      artList: [],
    });

  },


  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },

  search(e) {
    var keyword = this.data.inputVal.toLowerCase()
    this.setData({
      keyword: keyword,
      op: 1,
    })

    this.searchArt(1, keyword)
  },

其中，inputTyping和search方法是记录搜索内容，并向后台请求数据，其它两个方法是为了美化搜索框的效果。

当后台返回数据后，会赋值给artList，它是一个数组列表，我们循环读取渲染它的内容。在index.wxml中的代码如下：

 <!-- 内容-->
    <!--循环输出-->
    <view class="weui-cells">
      <block wx:for="{{artList}}" wx:key="uuid" >
        <view aria-labelledby="js_cell_l1_bd " aria-describedby="js_cell_l1_note" class="weui-cell weui-cell_access" hover-class="weui-cell_active" bindtap="jump" data-idx="{{index}}" data-guid="{{item.uuid}}" data-stars="{{item.views}}">
          <view class="weui-cell__bd" id="js_cell_l1_bd" aria-hidden="true">
            <view>{{item.title}}</view>
          </view>
          <view class="weui-cell__ft weui-cell__ft_in-access" aria-hidden="true">
            <text wx:if="{{ item.lockState == 1 }}" id="js_cell_l1_note" aria-label="，锁" class="weui-badge weui-badge_dot">锁</text>
            <text wx:elif="{{ item.createTime > yestTime }}" id="js_cell_l1_note" aria-label="，新" class="weui-badge weui-badge_dot">新</text>
            <!-- <text wx:elif="{{ item.updateTime > item.createdTime }}" id="js_cell_l1_note" aria-label="，有更新" class="weui-badge weui-badge_dot">修</text> -->
            <text wx:elif="{{ item.views > 50 }}" id="js_cell_l1_note" aria-label="，火" class="weui-badge weui-badge_dot">热</text>
            <text wx:elif="{{ item.views > 500 }}" id="js_cell_l1_note" aria-label="，非常火" class="weui-badge weui-badge_dot">爆</text>
            <text wx:elif="{{ item.views > 5000 }}" id="js_cell_l1_note" aria-label="，超级火" class="weui-badge weui-badge_dot">燃</text>
          </view>
        </view>
      </block>
    </view>
    <!--循环输出-->

为了更好的体验，我们在列表中根据浏览次数，显示不同的修饰词。让用户更好的了解到那篇文章质量更高，更受欢迎。点击列表后，会跳转到文章详情。通过jump方法实现。当在视图上需要更多的参数时，可以使用data-格式，这样会传给js具体值，在请求后台数据章节我们会讲解更多。

首页中，包含3个快捷按钮，分别为最新、最火、最冷。根据文章的浏览量来排序展示。按钮本身有点击属性，当点击按钮时，我们将根据按钮设置的参数去后台查询对应的数据。这三个按钮都使用同一个查询函数，为了区分三个按钮，我们可以使用view的id属性。代码如下：

  bindBtn: function (e) {
    let btnId = e.target.id;
    let qtype = 1;
    switch (btnId) {
      case "btnHot":
        // 按浏览次数倒序排序，再按创建升序
        qtype = 1;
        break;
      case "btnNew":
        // 按创建倒序排序
        qtype = 2;
        break;
      case "btnCold":
        // 按浏览次数升序排序，再按创建升序
        qtype = 3;
        break;
      default:
        break;
    }
    this.setData({
      artList: [],
      qtype: qtype,
      op: 2,
    })

    this.getArtList(1, qtype)
  },

下一节，我们讲解使用网络请求后台数据。

豆子笔记

首页数据交互