kouzhao/unimall-app/components/swiperup.vue

<template>
	<view class="wrap">
		 <swiper
	  id="_swiper_up"
	  :indicator-dots="indicatorDots"
	  :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" circular="true">
	  <block v-for="(item,index) in list" :key="index">
	    <swiper-item>
			<view class="itme_text">
				<view>
					<image class='gb' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/gb.png'></image>
					<image class='horn' src='https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/horn.png'></image>{{item.port}}{{item.goodsName}}&nbsp;&nbsp;({{item.newOld}})&nbsp;&nbsp;{{item.price}}元/吨
				</view>
			</view>
	    </swiper-item>
	  </block>
	</swiper>
	</view>
	
</template>

<script>
	export default {
		name: 'swiper_up',
		data() {
			return {
				typeList: {
					left: 'icon-zuo',
					right: 'icon-you',
					up: 'icon-shang',
					down: 'icon-xia'
				},
			}
		},
		props: {
			indicatorDots: {
				type: Boolean,
				default: false
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: String,
				default: '3000'
			},
			duration: {
				type: String,
				default: '1000'
			},
			list: {
				type: Array,
				default: []
			},
		},
		created(){
			console.log(this.list,this.autoplay)
		},
		onLoad(){
			console.log(this.list)
		},
		methods: {
			eventClick() {
				this.$emit('eventClick');
			}
		},
	}
</script>

<style scoped>
	.wrap{
		height: 64rpx;
		margin-bottom: 20rpx;
		background: #fff;
		line-height: 64rpx;
		position: relative;
		width:84%;
		margin:0 auto;
		margin-top:12px;
		box-shadow: 2px 2px 4px rgba(0,0,0,0.07);
	}
	.wrap::before{
		content: "";
		position: absolute;
		background: #fff;
		display: block;
		width: 35px;
		height: 35px;
		left: -15px;
		z-index: 1;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.wrap::after{
		content: "";
		position: absolute;
		background: #fff;
		display: block;
		width: 35px;
		height: 35px;
		right: -15px;
		z-index: 1;
		-webkit-border-radius: 50%;
		border-radius: 50%;
	}
	.gb{
		width:27px;
		height:21px;
		vertical-align: middle;
	}
	.horn{
		width:14px;height:14px;
		vertical-align: middle;
		margin-right: 10px;
	}
	swiper {
	  width: 100%;
	  height: 68rpx;
	  position: absolute;
	  left: 0rpx;
	  top: 0rpx;
	   pointer-events: none;
	    cursor: default;
		z-index:2;
	}
	 .cuIcon-notification{
		 margin-right:10rpx;
	 }
	.itme_text {
	  font-size: 26rpx;
	  z-index: 999;
	}
</style>