微信小程序仿淘寶熱搜詞在搜索框中輪播功能
更新時間：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)文章
利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘９ぷ鞯臅r候，利用javaScript判斷一個字符串中是否包括有數(shù)字和"-"，在一些表單提交的地方，這是比較有用的常規(guī)判斷，這里收集有幾種不同的方法，最后還將簡要介紹下isNAN函數(shù)的使用方法和例子，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
本文主要介紹了JavaScript的閉包及應(yīng)用。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js中settimeout方法加參數(shù)的使用,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了javascript基本常用排序算法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本篇文章主要介紹了JavaScript中 DOM操作方法小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
js和jquery實現(xiàn)tab狀態(tài)欄切換效果
這篇文章主要為大家詳細介紹了js和jquery實現(xiàn)tab狀態(tài)欄切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JavaScript實現(xiàn)一個電子小蜘蛛,具體的樣子就是讓它會跟隨著我們的鼠標進行移動,那么我們?nèi)绾螌崿F(xiàn)這樣的效果呢,下面來詳細講解實現(xiàn)方法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了基于小程序?qū)崿F(xiàn)透明背景人像分割,此文主要實現(xiàn)識別人體的輪廓范圍，與背景進行分離并保存效果圖，適用于拍照背景替換及透明背景的人像圖（png格式）轉(zhuǎn)換，需要的朋友可以參考下2022-10-10
javascript數(shù)組includes、reduce的基本使用
這篇文章主要給大家介紹了關(guān)于javascript數(shù)組includes、reduce的基本使用方法,includes方法是用于檢查特定元素是包含在數(shù)組還是字符串中的方法,而reduce用法則有很多,需要的朋友可以參考下2021-07-07
JavaScript中Array.from()的用法總結(jié)
本文主要介紹了JavaScript中Array.from()的用法總結(jié)2023-05-05