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