快速查询界面的布置

查询页面的组成：1 个搜索框表单输入，一个搜索按钮，后面还有一堆快捷查询的搜索按钮，用户点击这些按钮可以快速访问相应的动词变位。页面中搜索的 html 代码直接从 weui 的示例中挑选即可，而有些特殊的则是查询按钮，当按下这个按钮时需要呼出 picker，于是需要将 picker 标签包围在 button 周围：

  <view class="weui-cells__title">快速查询</view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__bd">
        <input class="weui-input" placeholder="请输入单词" bindinput="input_word_conj" />
      </view>
    </view>
  </view>

  <view class="button-sp-area">
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <button type="primary">查询</button>
    </picker>
  </view>
</pre>

picker 绑定的是 bindchange，同样在 js 文件中需要有相应的函数：

 bindPickerChange: function(e) {
    var idx_shitai = e.detail.value;
    console.log(idx_shitai);
    idx_shitai = parseInt(idx_shitai) + 2;
    this.setData({
      idx_shitai: idx_shitai
    })
    var search_word = this.data.input_word_conj;
    //下接
}

picker 中需要有对应的显示范围，即 range，这边需要在 js 文件的 data 中定义：

Page({
  data: {
    array: ['直陈式 复合过去时 Indicatif Passé composé', '直陈式 现在时 Indicatif Présent', '直陈式 未完成过去时 Indicatif Imparfait', '直陈式 愈过去时 Indicatif Plus-que-parfait', '直陈式 简单过去时 Indicatif Passé simple', '直陈式 先过去时 Indicatif Passé antérieur', '直陈式 简单将来时 Indicatif Futur', '直陈式 先将来时 Indicatif Futur antérieur', '直陈式 最近将来时 Indicatif Futur proche', '条件式 现在时 Conditionnel Présent', '条件式 过去时 Conditionnel Passé', '虚拟式 现在时 Subjonctif Présent', '虚拟式 未完成过去时 Subjonctif Imparfait', '虚拟式 愈过去时 Subjonctif Plus-que-parfait', '虚拟式 过去时 Subjonctif Passé', '命令式 Impératif Présent', '分词 Participe Présent & Passé'],
},

如果用户没有输入内容而直接按的搜索，那么将弹出一个 toast，下面这段在 bindPickerChange 函数中。在 toast 中 image 的优先级将高于 icon，这里将会显示一个感叹号。此外，最后将执行 exp 函数，这个函数将查找 search_word 在数据表中的位置：

//上接
if (search_word == null) {
      wx.showToast({
        title: '请输入内容！',
        image: '/style/gantanhao.png',
        icon: 'sucess',
        duration: 1000,
        mask: true,
      })
      return;
    }

    this.exp(search_word);
}

查询输入的 search_word，这里的代码和默写界面的查找非常相像，但是又有不同。大致逻辑是这样的：首先将遍历数据表中 word 列的所有数据（即单词本身），并且将这些数据以字符串的方式连接成数组，然后用 indexOf 来查询 search_word 在这个数组中第一次出现的位置，这里的 idx 就是一个数字。接下来的事情就和默写界面几乎一样：

exp: function(search_word) {
    var i;
    var temp_txt = [];
    for (i in list.conjAnswer) {
      temp_txt = temp_txt.concat(list.conjAnswer[i].word)
    }
    var idx = temp_txt.indexOf(search_word);

    if (idx == -1) {
      wx.showToast({
        title: '暂时没有收录',
        image: '/style/gantanhao.png',
        icon: 'sucess',
        duration: 1000,
        mask: true,
      })
      return;
    }
    switch (this.data.idx_shitai) {
      case 2:
        var random_shitai_chinois = "直陈式 复合过去时";
        var word_je = list.conjAnswer[idx];
        var word_tu = list.conjAnswer[idx + 1];
        var word_il = list.conjAnswer[idx + 2];
        var word_nous = list.conjAnswer[idx + 3];
        var word_vous = list.conjAnswer[idx + 4];
        var word_ils = list.conjAnswer[idx + 5];
        var shitai_je = word_je["fuhe_guoqushi"];
        var shitai_tu = word_tu["fuhe_guoqushi"];
        var shitai_il = word_il["fuhe_guoqushi"];
        var shitai_nous = word_nous["fuhe_guoqushi"]
        var shitai_vous = word_vous["fuhe_guoqushi"];
        var shitai_ils = word_ils["fuhe_guoqushi"];
        break;
//省略
}

快速查询点选

有了上述的工作成果，这里不难实现，每个按钮只需要这样的三行就能搞定：

etre: function() {
    this.tap_word("être");
  },

  avoir: function () {
    this.tap_word("avoir");
  },

  faire: function () {
    this.tap_word("faire");
  },

这里再加上一个 tap_word 函数，它做的事情和读取 input 框框内的输入值差不多：

tap_word: function(tap_word) {
    var input_word_conj = tap_word;
    this.setData({
      input_word_conj: tap_word
    })
    console.log(input_word_conj);
  },

最终给用户反馈结果的显示方式依旧不变，使用了 wx.showModal，详情请见第一个微信小程序：默写界面的规划和布置