第一个微信小程序:快速查询界面的规划和布置

/uploads/2019/06/I-like-pineapple.-Its-delightful.-1024x576.png

快速查询界面的布置

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

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

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

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

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

快速查询点选

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

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注