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


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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
javascript canvas实现简易时钟例子
Sep 05 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/06/01 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
使用js画图之画切线
2015/01/12 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
利用Python如何生成随机密码
2016/04/20 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python 如何实现遗传算法
2020/09/22 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
管理专员自荐信
2014/01/26 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL