wangluohuoyun-app/pages/goodSource/index.vue

<!-- 货源 -->
<template>
	<view class="content">
		<view class="head flex flex-space-evenly">
			<view class="flex">
				<view>装</view>
				<view @click="changeCity(0)">营口</view>
				<view>></view>
			</view>
			<view>-------></view>
			<view class="flex">
				<view>卸</view>
				<view @click="changeCity(1)">全国</view>
				<view>></view>
			</view>
		</view>
		<me-tabs v-model="tabIndex" :tabs="tabs" class="m-topr20"></me-tabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height">
				</mescroll-item>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				height: "", // 需要固定swiper的高度
				tabs: [{name:'推荐'}, {name:'按时间'}, {name:'按距离'}, {name:'运费先付'}],
				tabIndex: 0 // 当前tab的下标

			}
		},
		onLoad() {
			let _isHave = this.$utils.getRoles('aaa')
			console.log(_isHave)
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
		},
		methods: {
			changeCity(type) {
				console.log(type)
			},
			swiperChange(e) {
				this.tabIndex = e.detail.current
			}
		}
	}
</script>

<style scoped lang="scss">

</style>