uniapp可滑动的顶部导航

1.刚开始接触uniapp的时候一直纠接这个导航栏滑动的问题。今天抽空把有用的部分提拉出来。做个小笔记。

<template><view class="container"><view class="status_bar" v-bind:style="{ height: statusBarHeight }"></view><!-- <view class="navbar"><view :class="[tabindex==1?'navbtn':'navactive']"   @click="switchtabar(1)">接单任务</view><view :class="[tabindex==2?'navbtn':'navactive']"    @click="switchtabar(2)">套餐任务</view><view :class="[tabindex==3?'navbtn':'navactive']"    @click="switchtabar(3)">接单记录</view></view> --><view class="uni-tab-bar"><scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft"><view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id":data-current="index" @click="tapTab(index)">{{tab.name}}</view></scroll-view><swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab"><swiper-item v-for="(tab,index1) in newsitems" :key="index1">{{tab.name}}</swiper-item></swiper></view></view></template>
<script>
import { mapGetters, mapActions } from 'vuex';
import util from '../../static/js/util.js';
import regex from '../../static/js/regex.js';
export default {computed: {...mapGetters(['statusBarHeight'])},data() {return {pay: {},status: '',paylists: {},payname: uni.getStorageSync('paylist').pay_type_name,payid: uni.getStorageSync('paylist').id,tabindex:1,newsitems:[{name: '关注',id: 'guanzhu'}, {name: '推荐',id: 'tuijian'}, {name: '体育',id: 'tiyu'}, {name: '热点',id: 'redian'}, {name: '财经',id: 'caijing'}, {name: '娱乐',id: 'yule'}, {name: '军事',id: 'junshi'}, {name: '历史',id: 'lishi'}, {name: '本地',id: 'bendi'}],tabBars: [{name: '关注',id: 'guanzhu'}, {name: '推荐',id: 'tuijian'}, {name: '体育',id: 'tiyu'}, {name: '热点',id: 'redian'}, {name: '财经',id: 'caijing'}, {name: '娱乐',id: 'yule'}, {name: '军事',id: 'junshi'}, {name: '历史',id: 'lishi'}, {name: '本地',id: 'bendi'}],scrollLeft: 0,isClickChange: false,tabIndex: 0,};},onLoad: function(e) {this.pay = uni.getStorageSync('paylist');},methods: {async changeTab(e) {let index = e.detail.current;if (this.isClickChange) {this.tabIndex = index;this.isClickChange = false;return;}let tabBar = await this.getElSize("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft;let width = 0;for (let i = 0; i < index; i++) {let result = await this.getElSize(this.tabBars[i].id);width += result.width;}let winWidth = uni.getSystemInfoSync().windowWidth,nowElement = await this.getElSize(this.tabBars[index].id),nowWidth = nowElement.width;if (width + nowWidth - tabBarScrollLeft > winWidth) {this.scrollLeft = width + nowWidth - winWidth;}if (width < tabBarScrollLeft) {this.scrollLeft = width;}this.isClickChange = false;this.tabIndex = index; //一旦访问data就会出问题},async tapTab(index) { //点击tab-barconsole.log(index);if (this.tabIndex === index) {return false;} else {let tabBar = await this.getElSize("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeftthis.scrollLeft = tabBarScrollLeft;this.isClickChange = true;this.tabIndex = index;}},switchtabar(index){this.tabindex=index;},getElSize(id) { //得到元素的sizereturn new Promise((res, rej) => {uni.createSelectorQuery().select('#' + id).fields({size: true,scrollOffset: true}, (data) => {res(data);}).exec();});},golist() {uni.navigateTo({url: '/pages/c2c/selloutlist'});},goerwei() {uni.navigateTo({url: '/pages/c2c/opay?pay=1'});}}
};
</script>
<style lang="scss" scoped>
.container {width: 100%;font-size: 28upx;background: #f2f2f2;color: #555;height: 100vh;overflow: scroll;position: absolute;font-weight: 400;font-family: '仿宋';text-align: center;.navbar{width: 100%;font-size: 28upx;background: #fff;color: #000;height: 90upx;.navbtn{width:33%;float:left;line-height: 90upx;font-size:36px;border-bottom:5upx solid #E6BE7D;}.navactive{width:33%;float:left;line-height: 90upx;font-size:28px;border-bottom:5upx solid #fff;color:#ccc;}}}
</style>

uniapp可滑动的顶部导航相关推荐

Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
Android ViewPager和Fragment实现顶部导航界面滑动效果
在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官 ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
Android 应用开发----7. ViewPager+Fragment一步步打造顶部导航界面滑动效果
ViewPager+Fragment一步步打造顶部导航界面滑动效果在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间 ...
uniapp修改顶部导航背景色
uniapp 修改顶部背景色* 上图: 代码: 在pages.json文件里: "pages": [{"path" : "pages/login/lo ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...

uniapp可滑动的顶部导航

uniapp可滑动的顶部导航相关推荐

最新文章

热门文章