Uniapp 动态修改标题和使用 swiper 轮播图组件(十六)

动态修改标题和使用 swiper 轮播图组件

• 使用 setNavigationBarTitle 修改页面标题

• 使用 swiper 轮播图组件

• 使用 scrollview 组件实现分页

使用 setNavigationBarTitle 修改页面标题

uni.setNavigationBarTitle({
  title: '专辑',
})

轮播图

• 1.自动轮播 autoplay
• 2.指示器 indicator-dots
• 3.衔接轮播 circular
• 4.swiper 默认高度是 150px 而 image 高度是 320px
• 5.swiper 的高度是 image 撑不开的
• 6.计算图片宽度和高度的比例
• 7.把图片的比例也写道 swiper 标签样式中
• 8.swiper-item 宽度高度都是 100%

举例:图片宽度 680px,高度是 284px.比例是 2.3

<swiper autoplay indicator-dots circular>
  <swiper-item v-for="item in banner" :key="item.id">
    <image :src="item.thumb"></image>
  </swiper-item>
</swiper>

<style lang="scss">
  swiper {
    //宽度是750rpx比例是2.3 所以最好是写数值
    height: calc(750rpx / 2.3);
    image {
      height: 100%;
    }
  }
</style>