uniapp简单实现轮播图

<template>
	<!-- 轮播图 -->
	<view class="background-style">
	  <swiper :indicator-dots="indicatorDots" :circular="circular" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration">
	    <swiper-item>
	      <image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3909434962,3584802110&fm=26&gp=0.jpg" mode=""></image>
        </swiper-item>
        <swiper-item>
           <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3448238345,2979385749&fm=26&gp=0.jpg" mode=""></image>
        </swiper-item>
        <swiper-item>
            <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1128345303,3817199128&fm=26&gp=0.jpg" mode=""></image>
        </swiper-item>
      </swiper>
	  
	  
	  <view class="price-content-style">
	  	 <view class="price-style">
	  	 	￥350.00
	  	 </view>
		 <view class="content-style">
		 	【官方正品】全新Dior迪奥烈焰蓝金唇膏红色传奇新色丝绒992548
		 </view>
	  </view>
	  <view class="btn-background">
	  	 <image @click="collection" v-if="collection_status==0" src="/static/collection.png" mode=""></image>
		 <image @click="collection" v-if="collection_status==1" src="/static/collection-two.png" mode=""></image>
		 <button style="background-color: #44f8ff;" type="default">立即试妆</button>
		 <button type="primary"  @click="buyNow()" style="background-color: #FF7272;" >立即购买</button>
	  </view>
	  
	  <uni-popup id="popupGoods" ref="popupGoods" type="share" @change="change">
	  	<uni-popup-share title="选择类型" @select="select"></uni-popup-share>
	  </uni-popup>
	  
	  
	  
    </view>
	
</template>
 
<script>
var that;
export default {
	
	data() {
	 return {
	    indicatorDots: true,
	    circular:true,
	    autoplay: true,
	    interval: 1500,
	    duration: 500,
	    indicatorColor:"#DD524D",
	    indicatorActiveColor: "#ffffff",
		collection_status:0,
      }
	},
	created(){
		that = this;
	},
	
	onLoad() {
	 
	},
	  methods: {
		collection(){
			var collection_status = that.collection_status;
			if(collection_status==0){
				that.collection_status = 1
			}else{
				that.collection_status = 0
			}
		},
		buyNow(){
			this.$refs.popupGoods.open()
		},
		/**
		 * popup 状态发生变化触发
		 * @param {Object} e
		 */
		change(e) {
			console.log('popup ' + e.type + ' 状态', e.show)
		},
		/**
		 * 选择内容
		 */
		select(e, done) {
			uni.showToast({
				title: `您选择了第${e.index+1}项：${e.item.text}`,
				icon: 'none'
			})
			done()
		},
	 }
} 
</script>
 
<style>
	
	.background-style{
		width: 100%;
		height:900px;
	}
	.background-style swiper{
		width: 100%;
		height: 700px;
	}
	.background-style swiper-item{
		width: 100%;
	}
	.background-style image{
		width: 100%;
		height: 100%;
	}
	.price-content-style{
       width: 100%;
	   height: 120px;
	}
	.price-style{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		color: #FF7272;
		font-weight: 800;
		height: 100px;
	}
	.content-style{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		color: #000000;
		font-size: 16px;
	}
	.btn-background{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		bottom: 0;
		position: absolute;
	}
	.btn-background image{
		width: 7%;
		height: 50%;
		margin-left: 5%;
	}
	.background-style button{
		width: 35%;
		border-radius: 50px;
		height: 55%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}
</style>

关注我的公众号SpaceObj 领取idea系列激活码