效果展示
APICloud的AVM官方框架中有一个 frame-group的组件，在此组件的基础上，将栏目导航中view标签换成了 scroll-view标签，并设置成允许横向滚动。
1、修改了标签的样式，以满足项目需要，其他开发者可根据项目具体要求进行样式的修改。
2、计算向右滚动的距离，实现活动frame-group中滑动页面的同时，导航栏也跟着向右滑动。
要点：
1、每个栏目的宽度要用百分比，因为不同手机屏幕的尺寸不一致，为了计算的精确和适配，最好使用百分比。用百分比的好处是，页面栏目能显示出来的数量是可以确定的，15% 的话就是7个（最后一个5%的部分被遮挡），20%的话就是5个，不用再去计算了。
2、如果在样式中有margin或者padding，在计算的时候需要把这些属性设置的值考虑进去。
目录结构
代码源码
代码语言：javascript复制<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>
