主页（二）-轮播图——基础布局和对接后台接口数据

最新推荐文章于 2024-08-10 14:26:39 发布

viceen

最新推荐文章于 2024-08-10 14:26:39 发布

阅读量2.5k

点赞数

分类专栏：项目-小程序-mpvue框架文章标签：数据结构 vue 小程序

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109202031

版权

项目-小程序-mpvue框架专栏收录该内容

62 篇文章

订阅专栏

本文介绍如何使用小程序的swiper组件实现轮播图效果，并通过实际代码示例展示了数据的加载及展示过程。同时，文中还提供了从后台获取轮播图数据的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图

基于小程序swiper实现轮播图布局

<swiper :indicator-dots='indicatorDots'>
  <swiper-item :key='index' v-for='(item, index) in imgUrls'>
      <image :src="item" class="slide-image"/>
  </swiper-item>
</swiper>

// swiper数据
data: {
  imgUrls: [
    'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
    'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
    'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
  ],
  indicatorDots: false, // 显示底部小圆点
  autoplay: false       // 自动播放
}

对接后台接口轮播图数据：接口地址参见【接口文档】

mpvue.request({
  url: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata',
  success: function (res) {
    let {message} = res.data
    let imgs = message.map(item => {
       return item.image_src;
    });
    that.imgUrls = imgs
  }
})

在home/index.vue中,

基本布局

结构

在这里插入图片描述

样式

在这里插入图片描述

效果

在这里插入图片描述

对接数据

结构

  <!-- 轮播图效果 -->
    <swiper indicator-dots='true' autoPlay='true'>
      <swiper-item :key='item.goods_id' v-for='item in swiper'>
           <!-- 注意  绑定路径要有冒号 -->
        <img :src="item.image_src">
      </swiper-item>
    </swiper>

数据

export default {
  data () {
    return {
      swiper: [],
    }
  },
  methods: {
    swiperData () {
      wx.request({
        url: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata',
        success: (res) => {
          if (res.data.meta.status === 200) {
            this.swiper = res.data.message
          }
        }
      })
   }
 },
  created () {
    this.swiperData ()
  },
}