new_beiliyou_user_app/pages_shopping/store/beiliyouHome.vue

<template>
	<view class="column " style="height: 100vh;" >
		<view class="top-content" >
			<!-- 搜索框 -->
			<view class="search-cont">
				<view class="inner">
					<image class="icon-search" src="/static/images/search.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="输入关键字搜索" confirm-type="search"
					 @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
		</view>
		<view class="bgf topguide" >
			<view class=" bold ml30 color3">以往会刊</view>
			 <scroll-view 
			      scroll-x 
				  :refresher-enabled="true"
			      class="scroll-container"
			      @scrolltolower="loadMore" 
			      :scroll-left="scrollLeft"
			    >
			      <!-- 横向内容列表 -->
			      <view class="item-list">
			        <view  v-for="(item, index) in guidelisttype"  :key="index" class="item"
					@click="selguide(item.categoryId)" :class="{ 'active': selectedIndex === item.categoryId }">
						<view class="image-box ">
							<image :src="item.imageUrl" mode="aspectFill" ></image>
							<view class="fs28 mt10">{{item.categoryName}}</view>
							<view class="fs24 " style="color: #848484;font-weight: normal;"></view>
						</view>
			        </view>
			        <!-- 加载状态提示 -->
					<view @click="loadMore" class=" color9 fs24">{{statusA?"点击加载更多":"没有更多"}}</view>
			      </view>
			    </scroll-view>
		</view>
		<view class="ml30 mt30 bold color3 ">精选文章</view>
		<view style="flex: 1; overflow: hidden;" class="plr30 ptb20" >
			<scroll-view scroll-y="true"  :refresher-enabled="isEnabled" style="height: 100%"
				:refresher-triggered="triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="triggered = false"
				:upper-threshold="100" :lower-threshold="40" @refresherabort="triggered = false"
				@scrolltolower="reachBottom">
				<view class="bgf guideitem mt60 " v-for='(item,index) in guidelist' :key="index" @click="toguide(item)">
					<image :src="item.imageUrl"
					mode="aspectFill"></image>
					<view class="column justify-between ptb30 mr30" 
					style="height: calc(100% - 60rpx);width: calc(55% - 30rpx);float: right;">
						<view>
							<view>{{item.title}}</view>
							<view class="color6 fs28 text-ellipsis mt10">{{item.description?item.description:''}}</view>
						</view>
						<view class="justify-between align-center">
							<view class="justify-start align-center">
								<u-icon name="eye" color="#888" size="18"></u-icon>
								<view class="fs24 ">{{item.views}}</view>
							</view>
							<view class="u-border fs24 color3 ptb6 plr30 radius8">
								点击阅读
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {getbeilihometype,getbeilihomelist} from '@/api/doc.js'
	export default {
		data() {
			return {
				id:0,
				keyword:'',//搜索关键词
				guidelisttype:[],
				guidelist:[],
				selectedIndex:'',
				pageNum:1,
				pageSize: 5,
				triggered: false,
				isEnabled:true,
				status: 'nomore',
				// 分类分页
				pageNums:1,
				pageSizes:5,
				statusA:false,
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.title) {
			    uni.setNavigationBarTitle({
			      title: option.title
			    });
			  }
			  this.getclassification()
		},
		methods: {
			loadMore() {
				if (this.statusA) {
					this.pageNums++
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.getclassification() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 200);
				}
			},
			pullDownRefresh() {
				// 下拉
				this.triggered = true; //下拉了状态为true
				console.log(123)
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getguideList('refresh') //触底  不穿执行else
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				console.log(123)
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getguideList() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			toguide(item){
				uni.navigateTo({
					url:'/pages_shopping/store/guideDetail?title='+item.title+'&id='+item.articleId
				})
			},
			doSearch(e){
				console.log(e)
				this.keyword=e.detail.value
			},
			selguide(id){
				this.selectedIndex=id
				this.guidelist=[]
				this.getguideList()
			},
			getclassification(){
				uni.showLoading({
					title: "加载中..."
				})
				const data={
					pageNum:this.pageNums,
					pageSize:this.pageSizes,
				}
				getbeilihometype(data).then(res=>{
					if(res.code==200){
						uni.hideLoading()
						if (res.data.isLastPage) {
							this.guidelisttype = [...this.guidelisttype, ...res.data.list]
						  } else {
							  this.guidelisttype = res.data.list
							  this.selectedIndex=this.guidelisttype[0].categoryId
						  }
						  if ( res.data.isLastPage) {
						  	this.statusA = false
						  } else {
						  	this.statusA = true
						  }
						  this.getguideList()
					}
				})
			},
			getguideList(type){
				// uni.showLoading({
				// 	title: "加载中..."
				// })
				const data={
					categoryId:this.selectedIndex,
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}
				getbeilihomelist(data).then(res=>{
					if(res.code==200){
						// uni.hideLoading()
						if (type == 'refresh') {
							this.guidelist = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.guidelist = [...this.guidelist, ...res.data.list]
						}
						if ( res.data.isLastPage) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topguide{
		// position: fixed;
		z-index: 9;
		width: 100%;
	}
.scroll-container{
	width: calc(100% - 40rpx);
	white-space: nowrap;
	background: #fff;
	padding: 10rpx 20rpx;
	z-index: 101;
}
.item-list {
  padding: 20rpx 0rpx;
  overflow-x: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* 选中时的放大效果 */
.item.active {
  transform: scale(1.15); /* 放大1.1倍 */
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-weight: bold;
  border-radius: 20rpx;
}
.item {
  width: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 10rpx;
   transition: all 0.35s ease; /* 添加过渡动画 */
  .image-box{
  	width: 210rpx;
  	height: 340rpx;
	display: flex;
	flex-direction: column;
	image{
		width: 190rpx;
		height:340rpx;
		margin: 0 auto;
	}
  }
}

.loading-status {
  width: 200rpx;
  height: 200rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #999;
  flex-shrink: 0;
}

.top-content{
	width: 100%;
	// position: fixed;
	top:0;
	left: 0;
	z-index: 10;
}
.search-cont{
	padding: 16upx 30upx;
	background-color: #FFFFFF;
	.inner{
		box-sizing: border-box;
		width: 100%;
		height: 72upx;
		background: #F7F7F7;
		border-radius: 36upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		.icon-search{
			width: 28upx;
			height: 28upx;
			margin-right: 20upx;
		}
		input{
			height: 60upx;
			line-height: 60upx;
			flex: 1;
		}
	}
}
.guideitem{
	border-radius: 10rpx;
	box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
	padding: 20rpx;
	height: 300rpx;
	width: calc(100% -40rpx);
	position: relative;
	image{
		width: 250rpx;
		height:350rpx;
		border-radius: 8rpx;
		flex-shrink: 0; /* 禁止缩放 */
		position: absolute;
		top: -40rpx;
		box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
	}
}
</style>