竹子建站公司,注册网站域名需要什么,代理网址域名,什么是电子商务法目录 1 创建数据源2 首页搜索功能3 创建搜索页面4 搭建搜索结果页面总结 上一篇我们讲解了店铺信息的展示功能#xff0c;本篇讲解一下搜索功能。通常小程序在首页都配置了搜索的功能#xff0c;输入关键词进行检索#xff0c;可以在结果页上进行选购。同时还记录了用户的搜… 目录 1 创建数据源2 首页搜索功能3 创建搜索页面4 搭建搜索结果页面总结 上一篇我们讲解了店铺信息的展示功能本篇讲解一下搜索功能。通常小程序在首页都配置了搜索的功能输入关键词进行检索可以在结果页上进行选购。同时还记录了用户的搜索词将高频出现的词列为热搜词为了实现搜索词的记忆功能需要将用户的搜索记录记录到数据源中。 1 创建数据源
打开控制台点击数据模型点击新建 输入名称热搜词 点击编辑添加字段 添加第一个字段热搜词类型选择文本 添加第二个字段搜索次数类型选择数字 再添加一个数据源搜索历史记录 添加第一个字段搜索词类型选择文本 添加第二个字段openid类型选择文本
2 首页搜索功能
我们现在首页显示了店铺的名称我们要在名称的右边显示搜索框需要搭建一下布局先添加一个普通容器里边放置文本组件和单行输入组件模板选择搜索框填充 选中普通容器设置布局横向排列两端对齐垂直居中 修改一下单行输入的宽度设置为150
3 创建搜索页面
点击创建页面的图标创建搜索页面 给首页的单行输入组件设置事件聚焦的时候打开搜索结果页面
4 搭建搜索结果页面
先放入单行输入组件模板选择搜索框 然后放入文本组件内容修改为热门搜索 设置20的外边距 放入标签组件 选项的内容我们需要动态绑定先创建一个变量在左侧的代码区点击新建 选择新建微搭数据表查询 数据源选择热搜词方法选择查询多条 设置排序字段按照搜索次数降序排列一共取5条数据 给标签项绑定数据输入如下表达式
$w.hotsearch.data.records.map((item,index){return {label:item.rsc,value:item.rsc}
})设置一定的外边距 再添加一个普通容器里边放置文本和图标组件 设置普通容器的布局横向排列两端对齐垂直居中 修改文本内容为历史搜索图标选一个删除的图标 下边添加标签组件 定义一个变量数据源选择历史搜索记录 设置查询条件openid等于登录用户的openid 给标签项绑定变量绑定如下表达式
$w.userserach.data.records.map(item({label:item.ssc,value:item.ssc}))总结
本篇我们主要实现了搜索的效果的搭建后续要等我们主体功能设计完成才可以真正的实现搜索的具体效果。
