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


Posted in Javascript onJanuary 21, 2020

摘要

逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。

效果

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

体验

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

实现思路

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

1:input处于热搜提示词上层,用z-index实现
2:热搜词轮播用swiper实现,方向为vertical
3:在input聚焦时获取swiper当前值,设置为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: []
  }
 },

 /**
  * 组件的初始数据
  */
 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>

总结

以上所述是小编给大家介绍的微信小程序仿淘宝热搜词在搜索框中轮播功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue组件横向树实现代码
Aug 02 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 #Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
微信小程序图片自适应实现解析
Jan 21 #Javascript
微信小程序button标签open-type属性原理解析
Jan 21 #Javascript
Vue实现兄弟组件间的联动效果
Jan 21 #Javascript
You might like
PHP 简单日历实现代码
2009/10/28 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
使用js实现数据格式化
2014/12/03 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python图像处理入门(一)
2019/04/04 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
高二学生评语大全
2014/04/25 职场文书
球队口号
2014/06/18 职场文书
报到证办理个人委托书
2014/10/06 职场文书
高中体育课教学反思
2016/02/16 职场文书
nginx内存池源码解析
2021/11/20 Servers
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js