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

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

效果展示

1.gif

 

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

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

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

 

要点:

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

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

 

目录结构

2.png

 

代码源码

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

image.gif


现在,APICloud 官方正在举办 AVM 组件的征集大赛,通过审核就能获得一定的奖金,大家感兴趣的也可以去围观一下。传送门:https://www.apicloud.com/activity2205

相关文章
|
2月前
|
开发框架 JavaScript 前端开发
uni-app x 跨平台开发框架
uni-app x 是一个强大的跨平台开发框架 uni-app x 是一个庞大的工程,它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。
77 1
|
5月前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
216 60
|
3月前
|
Python Windows 内存技术
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
|
5月前
|
开发框架 小程序 前端开发
uni-app前端应用开发框架
uni-app对做移动端开发的来说应该无人不知、无人不晓了吧?!从名字就能看出来这个框架要干啥,unify app——没错,就是统一前端应用开发,不管你是小程序、app、还是H5、公众号,用这个框架都能做。uni-app让开发者编写一套代码,就可以编译为安卓app、ios app、微信小程序、抖音小程序、支付宝小程序等十几个平台,而且马上支持纯血鸿蒙了,这简直是个人、开发工作室、小型开发公司的福音,开发一些常规的app、小程序,用这个框架足够了。
67 7
|
5月前
|
安全 测试技术 网络安全
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
|
4月前
|
JSON 前端开发 API
移动端---------app开发03----apicloud必须掌握的代码
移动端---------app开发03----apicloud必须掌握的代码
|
4月前
|
前端开发 开发者
移动端-------app开发02,了解apicloud功能和使用,真机测试
移动端-------app开发02,了解apicloud功能和使用,真机测试
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
202 7
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
262 1
|
14天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
35 9