yiliangyiyun-app/components/swiperup.vue

<template>
	<view class="wrap" @click="clickInfoList()">
		 <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/new.png'></image>
					最新价格：<{{item.goodsName}}> 
					<text style="margin-right: 10px;margin-left: 10px;" :class="item.newPrice > item.openPrice ? 'text-red':'text-green'">{{item.newPrice}}</text>
					元/吨
				</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: {
			clickInfoList(){
				uni.navigateTo({
					url: `/pageB/info/info_list`
				})
			},
			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: 32px;
		height: 32px;
		left: -15px;
		z-index: 1;
		-webkit-border-radius: 30%;
		border-radius: 30%;
	}
	.wrap::after{
		content: "";
		position: absolute;
		background: #fff;
		display: block;
		width: 32px;
		height: 32px;
		right: -15px;
		z-index: 1;
		-webkit-border-radius: 30%;
		border-radius: 30%;
	}
	.gb{
		width:27px;
		height:21px;
		vertical-align: middle;
		margin-right: 10px;
		
	}
	.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;
	  color: #000000;
	}
</style>