uniapp轮播图（本地资源图片）

德鲁大叔撸代码

已于 2023-04-03 14:37:38 修改

阅读量1.2k

点赞数 1

分类专栏：微信小程序文章标签： uni-app

于 2023-04-03 14:16:52 首次发布

本文链接：https://blog.youkuaiyun.com/m0_43584016/article/details/129928660

版权

微信小程序专栏收录该内容

5 篇文章

订阅专栏

一、代码示例

<!-- 轮播图   .swiper{width: 100%} -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item  v-for="item in swiperList">
					<image :src="item" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告栏 -->
		<view class="notice">
		    <u-notice-bar fontSize="16" bgColor="#fff" color="#da1b02" :text="noticeContent"></u-notice-bar>
		</view>

二、本地图片

                //轮播图集合
                noticeContent: 'uniapp轮播图+实时消息滚动播放',
				swiperList:[
					'/static/swiper/one.jpg',
					'/static/swiper/two.jpg',
					'/static/swiper/four.jpg',
					'/static/swiper/five.jpg',
					'/static/swiper/fire.jpg',
					'/static/swiper/six.jpg'
				],