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


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笔记 String类replace函数的一些事
Sep 22 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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实现递归循环每一个目录
2010/08/08 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php eval函数用法总结
2012/10/31 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP实现简易计算器功能
2020/08/28 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
用Python写冒泡排序代码
2016/04/12 Python
python实现linux下抓包并存库功能
2018/07/18 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
数控加工专业毕业生自荐信
2013/09/27 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
批评与自我批评材料
2014/02/15 职场文书
保护环境倡议书范文
2014/05/13 职场文书
超强台风观后感
2015/06/09 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis