关于apicloud:使用APICloud-AVM框架实现App导航栏菜单

成果展现

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>