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


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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python编写登陆接口的方法
2017/07/10 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python分数表示方式和写法
2019/06/26 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
文员岗位职责范本
2014/03/08 职场文书
房地产开发项目建议书
2014/05/16 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL