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文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JS函数重载的解决方案
May 13 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
跟老齐学Python之Import 模块
2014/10/13 Python
python开发之list操作实例分析
2016/02/22 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
中英文求职信范文
2014/01/27 职场文书
捐款倡议书范文
2014/02/02 职场文书
文明市民先进事迹
2014/05/15 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python