jje_uniapp/pages/index/index.vue

<template>
	<view class="content">
		<!--搜索栏-->
		<view>
			<u-search :shape="square" @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" >
					<scroll-view  :style="{'height':windowHeight}" :scroll-y="true" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
						<uni-grid :column="2" :square="false" :showBorder="false">
							<uni-grid-item v-for="i in 10" :key="i">

								<view class="goods flex-col" @click="goGoodsDetail">
									<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>

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


	</view>
</template>

<script>
	export default {
		data() {
			return {

				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();
			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: {
			/*下拉刷新的回调 */
			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();
			},
			goGoodsDetail() {
				uni.navigateTo({
					url: '/orderPages/goodsDetail/index'
				})
			},
			getmessage() {
				this.$api.payTheBill({}).then(res => {
					console.log(res)
				})
			},
			clickTab(e){
				this.tabIndex = e.index
			},
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			scrolltoupper(){

			},
			scrolltolower(){

			}

		}
	}
</script>

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