更新记录
1.0.2(2022-06-15)
下载此版本
1.增加:组件接收上个页面传递的参数 进行搜索。
1.0.1(2022-06-14)
下载此版本
1.优化逻辑
2.增加完整说明文档 +案例
1.0.0(2022-05-29)
下载此版本
1.重构整个搜索页面
2.只测了vue2的微信小程序+h5端,v3没测
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.21 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
【2023-搜索页面-可能是最好用的插件】
d-search-log
弹框插件: https://ext.dcloud.net.cn/plugin?id=2708
日历插件: https://ext.dcloud.net.cn/plugin?id=2779
1. /pages/index/index.vue 为案例文件
2. 素材图片的话 复制到 /static/目录下
或者直接复制下边代码
<template>
<view>
<cu-custom bgColor="my-theme-bg" :isBack="false">
<block slot="backText">返回</block>
<block slot="content">搜索页面</block>
</cu-custom>
<d-search-log
:color_border="color_border"
:color_text="color_border"
:search_list_hot="search_list_hot"
:store_key="store_key"
@onClickDelAllApi="onClickDelAll"
@onSearchNameApi="onSearchName"
></d-search-log>
</view>
</template>
<script>
import dSearchLog from '@/uni_modules/d-search-log/components/d-search-log/d-search-log.vue'
export default {
components: {
"dSearchLog": dSearchLog
},
computed:{
},
data() {
return {
color_border:"#ff00ff",
search_list_hot:[],
store_key:'search_list',
}
},
onLoad() {
this.search_list_hot = [
'手机','电脑','河南老君山','三亚一游','北京环球影城','杭州西湖','保定驴肉火烧','保定狼牙山玻璃栈道'
]
},
methods: {
onClickDelAll() {
console.log('[父级接收事件]:删除全部搜索记录')
},
onSearchName(e) {
console.log('[父级接收事件]:点击搜索:'+e)
}
}
}
</script>
<style>
.my-theme-bg {
background: linear-gradient(117deg,#60DF9D,#31CB7B);
color:#fff;
/* background: linear-gradient(117deg,#23C0F7,#ff661e); */
/* background: linear-gradient(90deg, #FFAA57, #23C0F7); */
/* background: linear-gradient(90deg, #F37749, #FFAA57); */
/* #FFAA57 */
/* background-image: linear-gradient(45deg, #39b54a, #8dc63f); */
/* color: #ffffff; */
/* background-color: #f37b1d; */
/* color: #ffffff; */
/* background-color: #ffffff; */
/* color: #666666; */
/* linear-gradient(-27deg, #33CB80, #28D0AF) */
/* background-image: line=ar-gradient(-27deg,#33CB80,#28D0AF); */
/* color: #ffffff; */
/* background-image: line=ar-gradient(-27deg,#fff,#fff); */
/* background-image: line=ar-gradient(-27deg,#23C0F7,#23C0F7); */
/* color: #000; */
}
</style>