jje_spread_uniapp/pages/specialistsDetail/specialistsDetail.vue

<template>
	<view>
		<!-- #ifdef H5-->
		<uni-nav-bar  v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"  left-icon="left" title="累计交友圈专员详情" @clickLeft="back" />
		<!-- #endif -->


		<view class="flex-row justify-center">
			<u-tabs :list="tabList" lineWidth="50" :scrollable="false" @click="clickTabs" :current="current"></u-tabs>
		</view>

		<swiper class="swiper"  :style="{height:height}" :current="current" @change="swiperChange">
			<swiper-item>
				<view class="msg">
					<view class="flex-row justify-between msgItem">
						<view>
							<text>头像</text>
						</view>
						<view>
							<image src="/static/ud4.png" class="profilePhoto"></image>
						</view>
					</view>

					<view class="flex-row justify-between msgItem">
						<view>
							<text>好友编号</text>
						</view>
						<view>
							<text>Vip.00005555</text>
						</view>
					</view>


					<view class="flex-row justify-between msgItem">
						<view>
							<text>姓名</text>
						</view>
						<view>
							<text>张辉</text>
						</view>
					</view>

					<view class="flex-row justify-between msgItem">
						<view>
							<text>电话号码</text>
						</view>
						<view>
							<text>17365000141</text>
						</view>
					</view>

					<view class="flex-row justify-between msgItem">
						<view>
							<text>备注</text>
						</view>
						<view class="itemValue">
							<text>备注备注备注备注备注备注</text>
						</view>
					</view>

					<view class="flex-row justify-between msgItem">
						<view>
							<text>备注地址</text>
						</view>
						<view class="itemValue">
							<text>贵州省大方县撒上的啊水泥垫块蓝色快递费科技阿萨德不能</text>
						</view>
					</view>

					<view class="flex-row justify-between msgItem">
						<view>
							<text>现场照片</text>
						</view>
						<view class="itemValue">
							<image src="/static/ud4.png" class="photo"></image>
							<image src="/static/ud4.png" class="photo"></image>
							<image src="/static/ud4.png" class="photo"></image>
						</view>
					</view>

				</view>

			</swiper-item>

			<swiper-item>
				<mescroll-item ref="MescrollItem" :i="0"  :index="0"  :height="height">
				</mescroll-item>
			</swiper-item>
		</swiper>



		<!--#ifdef H5-->
		<liu-drag-button v-if="$isWxBrowser()"  @clickBtn="back">返回</liu-drag-button>
		<!--#endif-->
	</view>
</template>

<script>
	import MescrollItem from "./module/mescrollUni-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				height:'',
				current:0,
				tabList: [{
					name: '详情备注',
				}, {
					name: '交友记录',
				}]
			}
		},
		onLoad(e) {
			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.windowHeight  - 140 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {
			swiperChange(e){
				console.log(e)
				this.current= e.detail.current
			},
			clickTabs(e){
				this.current = e.index
			},
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1){
					uni.navigateBack({
						delta: 1,
						fail:err=>{
							console.log(err)
						}
					})
				}else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>