微信小程序 Vue 轮播图制作从数据库中读取

最新推荐文章于 2024-04-19 03:35:42 发布

堰堰

最新推荐文章于 2024-04-19 03:35:42 发布

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： vue 轮播图

本文链接：https://blog.csdn.net/weixin_44379270/article/details/98170678

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. vue 轮播图显示
从小程序手册中可以查到
在这里插入图片描述

注意自已的图片路径

 <template>
        <div>
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
        <block v-for="(item, index) in name" :index="index" :key="key">
            <swiper-item>
                <!-- <p> {{item.logo}}  </p> -->
                <image :src="'http://127.0.0.1/mail/laravel/storage/app/' + item.logo" class="slide-image" mode="aspectFill"/>
            </swiper-item>
        </block>
    </swiper>
            </div>
    </template>
    
    
    <script>
    export default {
        data() {
            return {
                name:{}
            }
        },
        mounted:function() {
            this.load()
        },
        methods: {
            load(){
                let t = this
                    wx.request({
                    url: 'http://7month.com/new', //仅为示例，并非真实的接口地址
                    data: {
                    },
                    header: {
                        'content-type': 'application/json' // 默认值
                    },
                    success (res) {
                        console.log(res.data)
                        t.name = res.data
                    }
                    })
            }
        },
    }
    </script>