Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how WeChat Mini Programs realizes the rotation function of imitating Taobao hot search words in the search box". The content is simple and clear, hoping to help you solve your doubts. Here, let the editor lead you to study and learn the article "how WeChat Mini Programs realizes the rotation function of imitating Taobao hot search words in the search box".

Realization idea

The train of thought is relatively simple, mainly two points.

1:input is at the top of the hot search prompt, implemented with z-index 2: hot search word rotation is implemented with swiper, direction is vertical3: get the current value of swiper when input is focused, set to placeholder4: hide swiper

Code

Have been encapsulated into components

Component code:

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: Align-items: center; position:absolute; zmurf index. 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 ({/ * component attribute list * / properties: {msgList: {type:JSON, value: []}}, / * component initial data * / data: {placeholder:'', currentIndex:0, index:0, isFocus:false, msgList: [], content:'', confirmContent:''}, ready () {this.setData ({msgList:this.properties.msgList})} / * * component method list * / 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.valuevaluation examples') {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": {}}

Page code

Js

Page ({data: {msgList: [{title: "moments"}, {title: "articles"}, {title: "Public account"}, {title: "Mini Program"}, {title: "Music"}, {title: "facial expressions"}, {title: "Subscription account"}]}, search (e) {wx.showToast ({icon: "none") Title: "searching" + e.detail.confirmContent,})}})

Wxss

The above is all the contents of the article "how to imitate Taobao hot search words in the search box", thank you for your reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.