热门

最新

红包

立Flag

投票

同城

发布
weixin_53051713
油麦菜你好
4 年前
trueweixin_53051713

小程序P99 05.首页-轮播图效果（接上一个）
！！！现在的正确接口是$http.baseUrl = 'https://api-ugo-web.itheima.net'

3.2.2 渲染轮播图的 UI 结构
//home.vue文件
渲染 UI 结构：
<template>
<view>
<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<!-- 循环渲染轮播图的 item 项 -->
<swiper-item v-for="(item, i) in swiperList" :key="i">
<view class="swiper-item">
<!-- 动态绑定图片的 src 属性 -->
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>

美化 UI 结构：
<style lang="scss">
swiper {
height: 330rpx;

.swiper-item,
image {
width: 100%;
height: 100%;
}
}
</style>

评论
1
打赏
  • 复制链接
  • 举报
下一条：
小程序P99 05.首页-轮播图效果（接上一个）3.2.1 请求轮播图的数据实现步骤：①在 data 中定义轮播图的数组②在 onLoad 生命周期函数中调用获取轮播图数据的方法③在 methods 中定义获取轮播图数据的方法//home.vue文件export default { data() { return { // 1. 轮播图的数据列表，默认为空数组 swiperList: [], } }, onLoad() { // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法 this.getSwiperList() }, methods: { // 3. 获取轮播图数据的方法 async getSwiperList() { // 3.1 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata') // 3.2 请求失败 if (res.meta.status !== 200) { return uni.showToast({ title: '数据请求失败！', duration: 1500, icon: 'none', }) } // 3.3 请求成功，为 data 中的数据赋值 this.swiperList = res.message }, },}