[wechat applet development] (III) homepage banner component uses swiper

uniapp swiper The document uses the address https://uniapp.dcloud.io/component/swiper.html

Just use this part directly according to the document usage , Post homepage code （ No dependency can be used directly ）

<template>
	<view class="content">
		<view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<img src="https://boss-1251943848.cos.ap-beijing.myqcloud.com/20220318/5113e64691274f2a9dc2c93ec39447f2.jpg?imageMogr2/thumbnail/750x" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<img src="https://boss-1251943848.cos.ap-beijing.myqcloud.com/20220331/d3c4f0a138564ad6ab7d04df14062de7.jpg?imageMogr2/thumbnail/750x" alt="">
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1500
			}
		},
		onLoad() {
    

		},
		methods: {
    
		}
	}
</script>

<style>
	.uni-margin-wrap {
    
		width:690rpx;
		width: 100%;
	}
	.swiper {
    
		height: 114px;
		margin: 15px;
		border-radius: 4px;
		overflow: hidden;
	}
	.swiper-item {
    
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
    
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt{
    
		margin-top:60rpx;
		position:relative;
	}
	.info {
    
		position: absolute;
		right:20rpx;
	}
    .uni-padding-wrap {
    
        width:550rpx;
        padding:0 100rpx;
    }
	.swiper-item img {
    
		width: 100%;
		height: 100%;
		display: block;
	}
	/* #ifdef APP-PLUS */
	uni-swiper .uni-swiper-dot {
    
		width: 10rpx;
		height: 3rpx;
	}

	uni-swiper .uni-swiper-dot-active {
    
		background-color: #000;
		width: 40rpx;
		border-radius: 5rpx;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	wx-swiper .wx-swiper-dot {
    
		width: 20px;
		height: 3px;
		border-radius: 2px;
		background: hsla(0,0%,100%,.4);;
	}

	wx-swiper .wx-swiper-dot-active {
    
		background: #FFF;
	}
</style>

The problem encountered is , There is no API Support Implementation requires the following two lines CSS And ensure CSS Is global rather than scoped

/* #ifdef MP-WEIXIN */
	wx-swiper .wx-swiper-dot {
    
		width: 20px;
		height: 3px;
		border-radius: 2px;
		background: hsla(0,0%,100%,.4);;
	}

	wx-swiper .wx-swiper-dot-active {
    
		background: #FFF;
	}

Then you get the following page