更新时间:2020年10月21日 11:09:34 作者:Mr.冬冬
这篇文章主要为大家详细介绍了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/" 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
JS实现随机颜色的3种方法与颜色格式的转化-
随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴,下面来一起看看吧。 - 2017-01-01
详解JavaScript作用域 闭包-
这篇文章主要介绍了JavaScript作用域 闭包的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下 - 2020-07-07
JavaScript交换两个变量方法实例-
这篇文章主要介绍了JavaScript交换两个变量方法实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 - 2019-11-11
百度搜索框智能提示案例jsonp-
这篇文章主要介绍了百度搜索框智能提示案例jsonp的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 - 2016-11-11
nginx配置React静态页面的方法教程-
作为一个前端开发时刻想着,怎么把自己写的东西,丢到自己的服务器上面,然后展示给别人看。下面我就简单直白的写下,这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。 - 2017-11-11
js实现精确到秒的倒计时效果-
这篇文章主要为大家详细介绍了js实现精确到秒的倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 - 2016-05-05