uiew使用记录

业务需求：使用uniapp构建一个带全屏选项卡且可以上拉加载的页面。
问题来源：这个功能通过组件实现并难，vuiew已经给除了解决方案，但是功能的实现并不是目的，要让页面的结构和代码逻辑更加清楚合理方便后期的维护才是重点（就是看自己写的代码不顺眼菜肴重写的）
参考：uview示例工程

1. 页面编写

<template>
  <view class="container">
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper ref="tabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
                       bar-width="80"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view class="page-box">
              <view class="msg" v-for="(item,index) in msgList[0]" :key="index">
                <view class="top">
                  <view>{{ item.ttl }}</view>
                  <view>{{item.date}}</view>
                </view>
                <view class="mid">{{ item.content }}</view>
              </view>
              <u-loadmore :status="loadStatus[0]" ></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <view class="msg" v-for="(item,index) in msgList[1]" :key="index">
                <view class="top">
                  <view>{{ item.ttl }}</view>
                  <view>{{item.date}}</view>
                </view>
                <view class="mid">{{ item.content }}</view>
              </view>
              <u-loadmore :status="loadStatus[1]" ></u-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

容器结构.png
swiper-item结构

结构是
tab容器(容器内承载tab组件)
swiper：内部放置swiper-item-->scroll-view-->子结构容器-->内容容器+加载更多组件

2. 样式编写
   编写思路是先把外部容器样式写好，在完成内容容器的编写，方便分开维护，通过布局调整内容区域，通过边距调容器和内容之间的距离

3. 脚本编写
   函数
   按照功能分为业务函数和样式函数，数据分类也同理