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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • uniapp实现可滑动选项卡

    本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l

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

    本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下 <template> <view> <home-view></home-view> <view class="content-box" :id="isScale?'content-box-too':''"> <view class="nav-head-box top-nav-fixed">

  • IOS仿今日头条滑动导航栏

    IOS仿今日头条滑动导航栏

    之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG

  • jQuery蓝色风格滑动导航栏代码分享

    jQuery蓝色风格滑动导航栏代码分享

    这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址 为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo

  • JavaScript实现滑动导航栏效果

    JavaScript实现滑动导航栏效果

    本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.

  • 微信小程序实现左侧滑动导航栏

    微信小程序实现左侧滑动导航栏

    本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下 左侧滑动导航栏如图 wxml <!-- 左侧滚动栏 --> <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo

  • uniapp微信小程序自定义导航栏的全过程

    uniapp微信小程序自定义导航栏的全过程

    目录 前言 那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结 前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点 首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序

  • 微信小程序使用uni-app实现首页搜索框导航栏功能详解

    微信小程序使用uni-app实现首页搜索框导航栏功能详解

    目录 前言 一.兼容APP与H5的方式 二.兼容小程序 三.实现同时兼容 前言 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 App.H5效果 小程序效果 一.兼容APP与H5的方式 在常见titleNView配置代码示例中可以看到基本样式的代码如下 { "pages": [{ "path": "pages/index/index", //首页 "style"

  • Vue实现tab导航栏并支持左右滑动功能

    Vue实现tab导航栏并支持左右滑动功能

    本文主要介绍:利用Vue实现tab导航栏,并且通过flex布局实现左右滑动,计算按钮的位置,当点击第一屏展示的最后一个且还有元素未展示时,自动滑动显示出未显示的元素. tab导航栏布局: <section class="theme-list"> <div class="fixed-nav" ref="fixednav"> <div class="fixed-nav-content"> <

  • uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    uni-app自定义导航栏右侧做增加按钮并跳转链接功能

    目录 1.先看效果图 2.实现思路 3.pages.json文件中配置 4.page的代码 5.点击按钮后跳转事件 uni-app自定义导航栏右侧做增加按钮并跳转链接 uni-app 在页面上的导航栏右侧做一个增加的图标 并实现跳转 1. 先看效果图 2. 实现思路 使用阿里图标库的字体图标, 下载放入本地文件 pages页面引入即可 这里说一句 uni-app 不支持在线图标 所以需要下载下来 引入到本地项目中 3. pages.json文件中配置 如果是要放在左边 改float : left

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

随机推荐