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

快速查询界面的布置 🚀

查询页面的组成: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,详情请见第一个微信小程序:默写界面的规划和布置

感谢您的使用! 如有任何疑问和建议,欢迎联系我的邮箱:[email protected]xd.red 或者搜索并关注公众号:uniquelabcn 直接发送反馈。