页面结构

基础结构

每一个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>

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