时间:2021-05-26
本文实例为大家分享了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
RadioGroup实现底部导航栏效果,如图::实现可最基本的导航栏功能,不能左右滑动,只能点击1.内嵌的fragment的布局:2.fragment的acti
如上效果的导航,导航是固定在顶部的,可以左右滑动点击更多选项的。这种制作相当简单,本文只是提几点注意:固定位置菜单固定在顶部不动,使用position:fixe
对Android利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情。主要介绍如何实现ViewPager自动播放,循环滚动的
Android编程常常使用ViewPager结合Fragment实现可以左右滑动切换的页面,但有时会遇到这样的需求,让ViewPager根据特定条件来控制其是否
先看效果图:这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换。实现步骤:编写滑块视图代码编写逻辑代码wxml:关注新鲜推荐关注新鲜推荐wx