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

<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>