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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
php实现记事本案例
2020/10/20 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
数据库面试要点基本概念
2013/10/31 面试题
大学生最常用的自我评价
2013/12/07 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书