• 页面结构
    • 基础结构
    • 滚动结构
    • 选项卡结构

    页面结构

    基础结构

    每一个vue页面（组件）的结构都包含了template script style 如下结构:

    1. <template>
    2.    <div>
    3.        <p>{{greeting}}</p>
    4.    </div>
    5. </template>
    6. <!--引入样式文件-->
    7. <style lang="sass" src="bui-weex/src/css/buiweex.scss"></style>
    8. <script>
    9.     module.exports = {
    10.         data: function () {
    11.             return {
    12.                greeting:"hello bui-weex"
    13.             }
    14.         }, 
    15.         methods: {  },
    16.         components:{ },
    17.         mounted: function () { }
    18.     }
    19. </script>

    注意事项：

    1. template 下面只能有一个顶级div标签
    2. buiweex.scss 样式文件的引入 需要带上 lang="sass"，业务层面的css推荐使用scss来编写

    滚动结构

    要让页面的某部分区域滚动，需要用到 scroller 标签。该标签的使用请查看 【scroller】

    1. <template>
    2.    <div>
    3.       <bui-header title="页面滚动"></bui-header>
    4.       <scroller>
    5.           <text class="h3" v-for="i in 100">第{{i}}行</text>
    6.       </scroller>
    7.    </div>
    8. </template>

    以上页面结构表示 除了 bui-header 外，其余部分滚动显示。如果页面使用了 list组件，则无需使用 scroller 标签也能达到滚动效果。

    选项卡结构

    要呈现选项卡的结构，需要用到框架的 bui-tabbar 组件，组件大致结构如下，请参考 【bui-tabbar】：

    1. <!--选项部分-->
    2. <bui-tabbar :tabItems="tabItems" showSelectedLine=true @change="onItemChange" v-model="currentTab">
    3. </bui-tabbar>
    5. <!--内容部分-->
    6. <slider class="slider" @change="onSliderChange" :index="currentTab">
    7.     <div class="slider-item">
    8.        <text class="h1">tab0</text>
    9.     </div>
    10.     <div class="slider-item">
    11.         <text class="h1">tab1</text>
    12.     </div>
    13.     <div class="slider-item">
    14.         <text class="h1">tab2</text>
    15.     </div>
    16.     <div class="slider-item">
    17.         <text class="h1">tab3</text>
    18.     </div>
    19. </slider>

    更多页面结构，后面会以案例和场景的方式呈现给各位！