微信小程序仿淘寶熱搜詞在搜索框中輪播功能
更新時間：2020年01月21日 14:38:48 作者：玩爛小程序
這篇文章主要介紹了微信小程序—仿淘寶熱搜詞在搜索框中輪播功能的相關(guān)資料,需要的朋友可以參考下
摘要
逛淘寶的時候，發(fā)現(xiàn)淘寶搜索框中一直在垂直方向上輪播熱搜提示詞，覺得這是個不錯的設(shè)計，除了能讓空間更充分使用，也能讓頁面更有動感，最重要的是能夠增加搜索框的使用頻率。就在小程序中試著實現(xiàn)實現(xiàn)。
效果
體驗
實現(xiàn)思路
思路比較簡單，主要是兩點，
1：input處于熱搜提示詞上層，用z-index實現(xiàn)
2：熱搜詞輪播用swiper實現(xiàn)，方向為vertical
3：在input聚焦時獲取swiper當(dāng)前值，設(shè)置為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: []
}
},
/**
* 組件的初始數(shù)據(jù)
*/
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>
總結(jié)
以上所述是小編給大家介紹的微信小程序仿淘寶熱搜詞在搜索框中輪播功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
最近做了一個項目，其中要實現(xiàn)這樣的功能，在首頁底部中間的tab彈出一個頁面，而且是沒有底部欄的，而不是像平?；瑒拥囊粋€子頁面。其實實現(xiàn)方法很簡單，下面通過本文給大家介紹下2016-12-12
這篇文章主要介紹了js實現(xiàn)Select列表各項上移和下移的方法,涉及javascript動態(tài)操作頁面元素屬性值的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS中多步驟多分步的StepJump組件實例詳解的相關(guān)資料,需要的朋友可以參考下2016-04-04
ES6中的Promise對象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語法上promise就是一個構(gòu)造函數(shù)，用來封裝異步操作病可以獲取其成功或失敗的結(jié)果，這篇文章主要介紹了ES6中的Promise對象與async和await方法,需要的朋友可以參考下2022-12-12
一般JSON字符串轉(zhuǎn)換為JS對象，都使用var jsonStr="{a:1}";var jsonObj = eval("("+jsonStr+")");2013-05-05
Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實現(xiàn)
借助于html2canvas庫，把網(wǎng)頁保存為Canvas畫布，再把生成的canvas保存成圖片，下面的示例，大家可以看看2014-09-09
微信小程序textarea層級過高(蓋住其他元素)問題的解決辦法
這篇文章主要給大家介紹了關(guān)于微信小程序textarea層級過高(蓋住其他元素)問題的解決辦法，文中通過圖文介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
在Angular中，最好在一個頂級模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導(dǎo)入它，最后還有初始化并監(jiān)聽瀏覽器的地址變化2023-01-01
這篇文章主要介紹了js獲取object類型里鍵值的方法,需要的朋友可以參考下2014-02-02