时间:2021-05-18
摘要
逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。
效果
体验
实现思路
思路比较简单,主要是两点,
1:input处于热搜提示词上层,用z-index实现
2:热搜词轮播用swiper实现,方向为vertical
3:在input聚焦时获取swiper当前值,设置为placeholder
4:将swiper隐藏
代码
已封装成组件
组件代码:
wxss
<view class="swiper-view"> <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000"> <block wx:for="{{msgList}}"> <swiper-item> <view class="swiper_item">{{item.title}}</view> </swiper-item> </block> </swiper></view>wxss
.container { width: 100%; height: 80rpx; display: flex; flex-direction: row; justify-content: center; align-items: center; background: #ededed;}.search-container { width: 690rpx; height: 60rpx; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background: #fff; border-radius: 5rpx;}.swiper_container { margin-left: 15rpx; height: 60rpx; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position:absolute; z-index:1;}.swiper_item { height: 60rpx; font-size: 26rpx; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}js
Component({ /** * 组件的属性列表 */ properties: { msgList:{ type:JSON, value: [] } }, /** * 组件的初始数据 */ data: { placeholder:'', currentIndex:0, index:0, isFocus:false, msgList: [], content:'', confirmContent:'' }, ready(){ this.setData({ msgList:this.properties.msgList }) }, /** * 组件的方法列表 */ methods: { changeIndex(e){ this.setData({ index:e.detail.current }) }, focusInput(){ this.setData({ isFocus:true, placeholder:this.data.msgList[this.data.index].title }) }, blurInput(){ if (this.data.content == ""){ this.setData({ isFocus: false, currentIndex: this.data.index, placeholder: '' }) } }, confirm(e){ var confirmContent = '' if(e.detail.value==''){ confirmContent = this.data.placeholder }else{ confirmContent = e.detail.value } this.triggerEvent('search', {confirmContent}) }, inputContent(e){ this.setData({ content: e.detail.value }) } }})json
{ "component": true, "usingComponents": {}}页面代码
js
Page({ data: { msgList: [ { title: "朋友圈" }, { title: "文章" }, { title: "公共号" }, { title: "小程序" }, { title: "音乐" }, { title: "表情" }, { title: "订阅号" }] }, search(e){ wx.showToast({ icon:"none", title: "正在搜索"+e.detail.confirmContent, }) }})wxss
<swiperSearch msgList="{{msgList}}" bind:search="search"></swiperSearch>总结
以上所述是小编给大家介绍的微信小程序仿淘宝热搜词在搜索框中轮播功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信热搜榜和热词怎么看?微信的热词功能是什么?微信热搜榜和热词功能是微信推出的一项功能,大家不要小看了微信热搜榜和热词哦,这些都是我们判定事物的依据哦,微信
9月7日,微信PC端新增“搜一搜”功能,手机版则上线了“热词搜索”功能。“热词搜索”what?!原来只要安卓手机与苹果手机微信升级至最新版本后,在界面中打开搜索
微信热搜词关键词怎么排名?微信热搜榜在哪看?我们在查看微信热搜词关键词的时候,会发现有一些微信热搜词关键词会排名靠前,各位微信用户,您知道微信热搜词关键词是
9月28日消息,微信“功能直达”正式开放。用户在微信搜一搜功能词,搜索页面将呈现相关服务的小程序,点击搜索结果,可直达小程序相关服务页面。目前,已有部分小程序用
微信热搜怎么搜?如何看微信热搜榜?微信现在有一个功能,那就是可以查看微信热搜榜,通过微信热搜榜,我们可以了解下最近微信用户搜索最多的东西是什么哦,那么微信热