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

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

实现思路

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

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

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