微信小程序如何实现仿淘宝热搜词在搜索框中轮播功能

这篇文章主要为大家展示了“微信小程序如何实现仿淘宝热搜词在搜索框中轮播功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序如何实现仿淘宝热搜词在搜索框中轮播功能”这篇文章吧。

实现思路

思路比较简单，主要是两点，

1：input处于热搜提示词上层，用z-index实现2：热搜词轮播用swiper实现，方向为vertical3：在input聚焦时获取swiper当前值，设置为placeholder4：将swiper隐藏

代码

已封装成组件

组件代码：

wxss

       {{item.title}}    

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:&＃39;&＃39;,  currentIndex:0,  index:0,  isFocus:false,  msgList: [],  content:&＃39;&＃39;,  confirmContent:&＃39;&＃39; }, 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: &＃39;&＃39;    })   }  },  confirm(e){   var cOnfirmContent= &＃39;&＃39;   if(e.detail.value==&＃39;&＃39;){    cOnfirmContent= this.data.placeholder   }else{    cOnfirmContent= e.detail.value   }   this.triggerEvent(&＃39;search&＃39;, {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

以上是“微信小程序如何实现仿淘宝热搜词在搜索框中轮播功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程笔记行业资讯频道！