微信小程序如何實現仿淘寶熱搜詞在搜索框中輪播功能

這篇文章主要為大家展示了“微信小程序如何實現仿淘寶熱搜詞在搜索框中輪播功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“微信小程序如何實現仿淘寶熱搜詞在搜索框中輪播功能”這篇文章吧。

實現思路

思路比較簡單，主要是兩點，

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>

以上是“微信小程序如何實現仿淘寶熱搜詞在搜索框中輪播功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！