weapp-image业务解决方案

swiperimageweapp

轮播图

我们最长用再小程序的就是轮播图,一般的轮播图就不讲了,举个卡片式的轮播的例子

依赖推荐: vue-awesome-swiper

基于vue的框架, 可在mpvue, uni-app或者taro(3.xx以上版本使用)

import { swiper, swiperSlide } from 'vue-awesome-swiper’
components: {
  swiper,
  swiperSlide
},
data () {
  return {
    swiperOption: {
      loop: true,
      autoplay: true,
      slidesPerView: 1.5,
      initialSlide: 2,
      centeredSlides: true, // 默认居中
      spaceBetween: 70, // slide之间的距离
      slidesOffsetBefore: -20,
      hashNavigation: true, // 设置散列导航选项
      preloadImages: true
    }
  }
}
<swiper v-if="model&&model.daily_plate&&model.daily_plate.length" :options="swiperOption" ref="mySwiper" class="card-banners">
  <swiper-slide v-for="(item,index) in model.daily_plate" :key="index">
    <router-link :to="item.target">
        <img :src="item.image">
    </router-link>
  </swiper-slide>
</swiper>