scro-view

  1. <!-- 顶部选项卡 -->
  2. <!-- scroll-row设置宽度100%，且不能换行 自定义样式-->
  3. <!-- border-bottom加上这个下边线，元素将可以滚动了 border-white隐藏border 自定义样式-->
  4. <!-- scroll-into-view保存对应子元素id，当子元素id与scroll-into-view相同时，会
  5. 让轮播图自动滚动到对应id的子元素 -->
  6. // scroll-with-animation为组件添加过渡动画
  7. <scroll-view scroll-x="true" 
  8.   :scroll-into-view="scrollInto"
  9.   scroll-with-animation
  10.   class="scroll-row border-bottom border-white">
  11.   <!-- scroll-row-item设置元素为行内块 -->
  12.   <view v-for="(item,index) in  tabBars" 
  13.     class="scroll-row-item px-2 py-2 font-md "
  14.     :id="'tab' + index"
  15.     @click="clickTab(index)"
  16.     :class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
  17.     :key="index">
  18.     {{item.name}}
  19.   </view>
  20. </scroll-view>

swiper

如果swiper没有显示，可能是没有高度，或宽度
swiper和scroll-view组合，形成左右滑动翻页，和上下滑动，外面依层swiper管理左右滑动，内部的scroll-view管理上下滑动

  1. <!-- tabbar内容区 -->
  2. <!-- indicator-dots指示点，一般轮播图有用到 -->
  3. <!-- autoplay是否自动播放 interval自动播放的事件间隔-->
  4. <!-- duration滑块过度时间 -->
  5. <!-- circular是否采用衔接滑动 -->
  6. <!-- vertical是否设置滑动方向为纵向     -->
  7. <!-- current当前滑块的index值 可以通过current属性一顶部选项卡关联-->
  8. <swiper
  9.   class="w-100"
  10.   :style="'height:'+scrollHeight + 'px;'"
  11.   :duration="150" :current="tabIndex" @change="onchangeTab"> 
  12.   <swiper-item v-for="(item,index) in newsList" 
  13.     :key="index">
  14.     <scroll-view scroll-y="true" :style="'height:'+scrollHeight + 'px;'">
  15.       <block v-for="(item1,index1) in item.list" :key="index1">
  16.         <!-- 通过父组件向子组件传值的方式将数据传递给子组件 -->
  17.         <commonList :item="item1" 
  18.           @follow="follow"
  19.           @doSupport="doSupport"
  20.           ref="commonList"
  21.           :index="index1"></commonList>
  22.         <!-- 分割线 -->
  23.         <divider></divider>
  24.       </block>
  25.     </scroll-view>
  26.   </swiper-item>
  27.   </swiper>

计算页面高度

  1. onLoad() {
  2.   // 获取系统信息
  3.   // 有两个方法，一个异步，一个同步
  4.   //获取到的高度不包括顶部导航栏和底部tabBar
  5.   uni.getSystemInfo({
  6.     success:res => {
  7.       // 成功获取系统信息时，返回的数据
  8.       // res.windowHeight获取到的高度时px
  9.       // uni.upx2px()将高度转换为px
  10.       this.scrollHeight = res.windowHeight - uni.upx2px(100)
  11.       // 将数据绑定到列表上面
  12.     }
  13.   })
  14. },

上拉加载更多

  1. //@scrolltolower="loadmore(index)" 是scroll-view自带的触底监听事件
  2. <swiper
  3. class="w-100"
  4. :style="'height:'+scrollHeight + 'px;'"
  5. :duration="150" :current="tabIndex" @change="onchangeTab"> 
  6. <swiper-item v-for="(item,index) in newsList" 
  7.   :key="index">
  8.   <scroll-view scroll-y="true" 
  9.     @scrolltolower="loadmore(index)"
  10.     :style="'height:'+scrollHeight + 'px;'">
  11.     <block v-for="(item1,index1) in item.list" :key="index1">
  12.       <!-- 通过父组件向子组件传值的方式将数据传递给子组件 -->
  13.       <commonList :item="item1" 
  14.         @follow="follow"
  15.         @doSupport="doSupport"
  16.         ref="commonList"
  17.         :index="index1"></commonList>
  18.       <!-- 分割线 -->
  19.       <divider></divider>
  20.     </block>
  21.     <!-- 上拉加载 -->
  22.     <view class="flex align-center justify-center py-3 ">
  23.       <text class="font text-light-muted">{{item.loadmore}}</text>
  24.     </view>
  25.   </scroll-view>
  26. </swiper-item>
  27. </swiper>
  1. // 上拉加载更多
  2. loadmore(index){
  3.   // 获取当前列表
  4.   let item = this.newsList[index]
  5.   // 出发后改变显示信息，为"加载中"，修改当前列表的列表加载状态
  6.   this.newsList[index].loadmore = "加载中..."
  7.   // 模拟数据请求
  8.   setTimeout(() => {
  9.     // 加载数据
  10.     item.list = [...item.list,...item.list]
  11.     // 恢复加载状态 
  12.     this.newsList[index].loadmore = "上拉加载更多"
  13.   },2000)
  14. }