使用 APICloud AVM 框架实现 App 导航栏菜单

2022 年 5 月 05 日
本文字数：1930 字
阅读完需：约 6 分钟

效果展示

APICloud 的 AVM 官方框架中有一个 frame-group 的组件，在此组件的基础上，将栏目导航中 view 标签换成了 scroll-view 标签，并设置成允许横向滚动。

1、修改了标签的样式，以满足项目需要，其他开发者可根据项目具体要求进行样式的修改。

2、计算向右滚动的距离，实现活动 frame-group 中滑动页面的同时，导航栏也跟着向右滑动。

要点：

1、每个栏目的宽度要用百分比，因为不同手机屏幕的尺寸不一致，为了计算的精确和适配，最好使用百分比。用百分比的好处是，页面栏目能显示出来的数量是可以确定的，15% 的话就是 7 个（最后一个 5%的部分被遮挡），20%的话就是 5 个，不用再去计算了。

2、如果在样式中有 margin 或者 padding，在计算的时候需要把这些属性设置的值考虑进去。

目录结构

代码源码

<template>    <view class="page">		<safe-area></safe-area>		<scroll-view id="navView" class="item-group" scroll-x scroll-y="false" show-scrollbar="false">            <view class="item" onclick={this.fnSetFrameGroupIndex} data-index={index} v-for="(item,index) in menuNameList">				<text class={this.data.selectedIndex==index?'item-title-active':'item-title'}>{item}</text>			</view>        </scroll-view>		<frame-group class="framegroup" id="frameGroup" preload="0" onchange={this.onchange} scrollEnabled="true"></frame-group>    </view></template><script>	export default {		name: 'index',		apiready(){			// console.log(api.winWidth);			var frames = [];			for (var i=0;i<this.data.menuList.length;i++) {				var name = this.data.menuList[i];				var title = this.data.menuNameList[i];				frames.push({					name: title,					url: name + '.stml'				});			}			var frameGroup = document.getElementById('frameGroup');			frameGroup.load({				frames: frames			});		},		data() {			return{				menuList: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9'],				menuNameList:['推荐', '法律', '法规', '生产', '安全', '环保', '机构', '新闻', '咨询'],                selectedIndex: 0,				itemWith:(api.winWidth-20)*0.15			}		},		methods: {			fnSetFrameGroupIndex(e) {				//计算scroll-view 向右滑动的距离，来实现活动页面时 顶部的导航也跟着滑动				var navView = document.getElementById('navView');                var index = e.target.dataset.index;				if(index>6){					navView.scrollTo({						x:(index-6)*this.data.itemWith+10					})				}				else if(index==6){					navView.scrollTo({						x:10					})				}				else{					if(this.data.selectedIndex>index){						navView.scrollTo({							x:0						})					}				}                if (this.data.selectedIndex != index) {                    this.data.selectedIndex = index;                    var frameGroup = document.getElementById('frameGroup');                    frameGroup.setIndex({                        index: index,                        scroll: true                    });                }            },            onchange(e){				//计算scroll-view 向右滑动的距离，来实现活动页面时 顶部的导航也跟着滑动				var navView = document.getElementById('navView');                var index = e.detail.index;				if(index>6){					navView.scrollTo({						x:(index-6)*this.data.itemWith+10					})				}				else if(index==6){					navView.scrollTo({						x:10					})				}				else{					if(this.data.selectedIndex>index){						navView.scrollTo({							x:0						})					}				}				//确认跳转当前页面                if (this.data.selectedIndex != index) {                    this.data.selectedIndex = index;                }            }		}	}</script><style>    .page {        height: 100%;    }	.item-group {        width: 100%;        height: 50px;		padding: 10px;    }    .item {		width: 15%;        align-items: center;    }	.item-title-active{		border-bottom: 2px solid #3c40c6;		color: #000000;		padding-bottom: 3px;	}	.item-title{		color: #666666;		padding-bottom: 3px;		border-bottom: 0px solid #3c40c6;	}	.framegroup{		margin: 10px;	}</style>