uniapp实现可以左右滑动导航栏


Posted in Javascript onOctober 21, 2020

本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下

<template>
 <view>
 <home-view></home-view>
 <view class="content-box" :id="isScale?'content-box-too':''">
 <view class="nav-head-box top-nav-fixed">
 <image @click="isScale=!isScale" class="icon-style" src="/static/iconImg/list.png" mode=""></image>
 <view style="height: 100%;" class="ft-color-white ft-36 flex-1 flex-wrap align-items-center justify-content-center">
  PIQSCORE
 </view>
 <text style="margin-right: 16upx;" class="iconfont icon-UI_icon_shebeisheshi ft-44 ft-color-red"></text>
 <text style="right: 30upx;bottom: 14upx;" class="iconfont icon-UI_icon_shebeisheshi ft-color-red ft-32 position-absolute"></text>
 </view>
 <view class="m-top-128 top-nav width-100 pd-f-r-36 ft-color-white flex-nowrap space-between position-relative">
 <view v-for="(item,index) in 4" :key="index" @click="currentIndex=index" class="top-nav-item">
  ALL
 </view>
 <view :style="'left:'+(currentIndex*164+36)+'upx'" class="position-absolute top-nav-child"></view>
 </view>
 <swiper style="height: 1122upx;" :current="currentIndex" @change="swiperTab">
 <swiper-item v-for="(item,index) in list" :key="index">
  <view class="width-100 height-100" style="background: #CCCCCC;">
  {{index}}
  </view>
 </swiper-item>
 </swiper>
 
 </view>
 
 
 </view>
</template>
 
<script>
 export default{
 data(){
 return{
 isScale:false,
 currentIndex:0,
 list:["ALL","ALL","ALL","ALL"]
 }
 },
 methods:{
 swiperTab(e) {
 this.currentIndex = e.detail.current //获取索引
 },
 }
 }
</script>
 
<style>
 .top-nav{
 height: 84upx;
 background: #008800;
 }
 .top-nav-item{
 width: 168upx;
 line-height: 82upx;
 text-align: center;
 }
 .top-nav-child{
 left: 0;
 bottom: 0;
 width: 164upx;
 background: #32B53F;
 height: 6upx;
 transition: all 0.5s;
 }
</style>

uniapp实现可以左右滑动导航栏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
You might like
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php简单日历函数
2015/10/28 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
JS实现轮播图效果
2020/01/11 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
华为c/c++笔试题
2016/01/25 面试题
行政人员工作职责
2013/12/05 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
学生会部长竞聘书
2014/03/31 职场文书
通信工程专业求职信
2014/06/04 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
群众路线对照检查材料
2014/09/22 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
高质量“欢迎词”
2019/04/03 职场文书
导游词之南京夫子庙
2019/12/09 职场文书