jje_uniapp/pages/order/index.vue

<template>
	<view>
		<u-sticky>
			<View>
				<u-tabs :list="tabList" :current="tabIndex" @click="clickTab"></u-tabs>
			</View>
		</u-sticky>

		<!-- 订单列表 -->
		<view :style="{'height':windowHeight}" >
			<swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
				<swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index" >
					<scroll-view :style="{'height':windowHeight}" :scroll-y="true"  @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">

							<view class="orderView flex-col" v-for="i in 20" :key="i">
								<view class="flex-row justify-between">
									<view class="orderImgView">
										<image class="orderImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view class="orderTitle flex-col">
										<view class="goodsName flex-col">
											<text>商品名称商品名称商品名称商品名称商品名称商品名称商品名称</text>
										</view>
										<view class="specification flex-col">
											<text>商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格</text>
										</view>
										<view>
											<text class="label">7天无理由退货</text>
										</view>
									</view>

									<view class="priceAndNumber flex-col">
										<view class="price flex-col">
											<text>￥81.44</text>
										</view>
										<view class="number flex-col">
											<text>x1</text>
										</view>
									</view>
								</view>
								<view class=" buttonView flex-row justify-end">
									<button class="button">申请售后</button>
									<button class="button">申请售后</button>
									<button class="button">申请售后</button>
									<button class="button">申请售后</button>
								</view>
							</view>



					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

				windowHeight:'',//屏幕的可用高度
				tabIndex:0,
				tabList: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '退款/售后'
				}],
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log('+++++menuButtonInfo+++++++',menuButtonInfo)
			this.menuButtonTop =menuButtonInfo.top+'px';  //胶囊按钮距离屏幕上边的距离
			this.menuButtonLeft =menuButtonInfo.left +'px'; //胶囊按钮距离屏幕左边的距离
			this.searchHeight=menuButtonInfo.bottom-menuButtonInfo.top +'px' //搜索框的高度
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight =sysInfo.windowHeight-44+'px'//除标题栏栏外的屏幕可用高度
		},
		methods: {
			clickTab(e){
				this.tabIndex = e.index
			},
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			scrolltoupper(){

			},
			scrolltolower(){

			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
	@import './index.rpx.css';
</style>