微信小程序,基于uni-app的轮播图制作,调用文件中图片

以便捷为目的,想使用文件中的图片制作轮播图

但网上找到的都是轮播图彼此分割,没有使用数组存储在一起,不便于管理,代码不美观简洁

作者使用文件中的图片,并使用数组制作轮播图的具体操作如下:(任一页面的.vue文件,完整简洁代码)

bash 复制代码
<template>
	<swiper>
		<swiper-item v-for = "item in picture" :key="item.id">
			<view>
				<image :src = "item.img"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uni',
				
				//轮播图数据
				picture : [
					{ id: '1', img: "/static/tabs/home_default.png"},
					{ id: '2', img: "/static/tabs/home_selected.png"}
				]
			}

		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
相关推荐
摇滚侠6 小时前
JAVA 项目教程《苍穹外卖-11》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·微信小程序
Emma_Maria8 小时前
【小程序】project.config.json 和project.private.config.json 区别以及对应字段含义
小程序
CHU7290359 小时前
家政保洁小程序功能架构解析
小程序
计算机徐师兄9 小时前
Java基于SSM的文玩销售小程序【附源码、文档说明】
java·小程序·文玩销售小程序·文玩销售·java文玩销售小程序·文玩销售微信小程序·java文玩销售微信小程序
雨雨雨雨雨别下啦10 小时前
【从0开始学前端】从0搭建uni-app小程序脚手架
小程序·uni-app
AnalogElectronic12 小时前
uniapp学习8,电动车充电小程序
学习·小程序·uni-app
2501_9159214312 小时前
iPhone 定位功能测试时不越狱来修改手机位置的方法
android·ios·智能手机·小程序·uni-app·iphone·webview
TE-茶叶蛋13 小时前
安卓应用(uniapp开发)分享微信-申请appid
android·微信·uni-app
AnalogElectronic13 小时前
uniapp学习9,同时兼容h5和微信小程序的百度地图组件
学习·微信小程序·uni-app
游戏开发爱好者813 小时前
iOS 开发进阶,用 SniffMaster 实现 iPhone 抓包深度分析
android·ios·小程序·https·uni-app·iphone·webview