jje_uniapp/pages/index/index.vue

<template>
	<view class="content">
		<!--搜索栏-->
		<view class="search"  :style="{'margin-top':menuButtonTop,'width':menuButtonLeft}">
			<u-search @search="doSearch" :showAction="false" :height="searchHeight" placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</view>
		<!--轮播图-->
		<view class="banner">
			<swiper :autoplay="true" :circular="true" :interval="3000" class="swiper" :indicator-dots="true">
				<swiper-item class="swiperItem" v-for="(item,index) in slideshowLinks" :key="index">
					<view class="swiperImgView ">
						<image class="swiperImg" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</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" >
					<mescroll-uni :ref="mescrollRef" @init="mescrollInit" :height="windowHeight" :down="downOption"
								  :up="upOption" @down="downCallback" @up="upCallback" @emptyclick="emptyClick">
						<uni-grid :column="2" :square="false" :showBorder="false">
							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>美女</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>

							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>商品名字商品名字商商品名字商品名字商品名字</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>


							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>商品名字商品品名字</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>

							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>商品名字商品名字商品名字商品名字商品名字商品品名字商品名字商品名字商品名字商品名字</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>


							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>商品名字商品名字商品名字商品名字商品名字商品名字商品名字商品名名字商品名字</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>

							<uni-grid-item>

								<view class="goods flex-col">
									<view class="goodsImgView">
										<image  class="goodsImg" src="/static/0e733b67a401b9b5776b5196cd5b38e0.jpg"></image>
									</view>
									<view  class="goodsName">
										<text>商品名字商品名字商品名字商</text>
									</view>
									<view  class="goodsImgTitle">
										<text>商品说明</text>
									</view>
									<view class="goodsPrice">
										<text>￥700</text>
									</view>
								</view>

							</uni-grid-item>


						</uni-grid>

					</mescroll-uni>
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/imageIcon/empty.png',
						tip: '暂无内容', // 提示
						// btnText: '去看看'
					},
					textNoMore: '没有更多了'
				},
				swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
				slideshowLinks: [
					'http://rredu.obs.cn-southwest-2.myhuaweicloud.com/upload/20230709/b1a1d6fcfb8b30f13b20607739e1b344.png',
					'http://rredu.obs.cn-southwest-2.myhuaweicloud.com/upload/20230709/c3d1ebde245651d602211ba7af4d1a92.png',
					'http://rredu.obs.cn-southwest-2.myhuaweicloud.com/upload/20230709/ee83d2c5934cea4d66a43a3a34d2cf86.png'
				],
				tabList: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				menuButtonTop:'',//胶囊按钮距离屏幕上边的距离
				menuButtonLeft:'',//胶囊按钮距离屏幕左边的距离
				searchHeight:'',//搜索框的高度
				windowHeight:'',//屏幕的可用高度
				tabIndex:0,
				keyword:'',
			}
		},
		onLoad() {
			this.getmessage()
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			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: {
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				// getSchoolPage(page.num, 10).then(res => {
				// 	console.log(res)
				// 	this.mescroll.endSuccess(res.data.data.records.length,res.data.data.records.length === 10);
				// 	if (page.num === 1) this.schoolMsgs = []; //如果是第一页需手动制空列表
				// 	if (res.data.data.records.length > 0){
				// 		this.schoolMsgs = this.schoolMsgs.concat(res.data.data.records); //追加新数据
				// 	}
				// }).catch((err) => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			// 搜索
			doSearch() {
				console.log('sousuo')
				this.list = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			goOrderDetail() {
				uni.navigateTo({
					url: '/orderPages/orderDetail/index'
				})
			},
			getmessage() {
				this.$api.payTheBill({}).then(res => {
					console.log(res)
				})
			},
			clickTab(e){
				this.tabIndex = e.index
			},
			swiperChange(e){
				this.tabIndex = e.detail.current
			}

		}
	}
</script>

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