创作者详情页修改

pages/creator/creatorDetail.vue

@@ -39,15 +39,14 @@
 				activeColor="#11A8FD"></uni-segmented-control>
 		</view>
 		<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false"
-			@change="changeItem" :duration="500">
-			<swiper-item v-for="(item,index) in imgList" :key="item"
-				:current-item-id="item">
+			@change="changeItem" :duration="500" :style="'height:'+swiperHeight+'rpx'">
+			<swiper-item v-for="(item,index) in arrList" :key="index">
 				<view class="swiper-item bottom">
-					<image :src="item.imgUrl" mode="":style="'width:'+imgWidth+';height:'+imgHeight" @click="targetDetail(item)"></image>
+					<image :src="val.imgUrl" mode="" :style="'width:'+imgWidth+'rpx;height:'+imgHeight+'rpx'"
+						@click="targetDetail(val)" v-for="(val,index) in imgList" :key="val"></image>
 				</view>
 			</swiper-item>
 		</swiper>
-
 	</view>
 	</view>
 </template>
@@ -67,34 +66,38 @@
 				imgList: [],
 				imgWidth: 0, // 图片宽
 				imgHeight: 0, // 图片高
+				swiperHeight: 0, // swiper高
 				pageNum: 1,
-				pageSize: 10,
+				pageSize: 4,
 			}
 		},
 		created() {
 			uni.getSystemInfo({
 				success: res => {
-					console.log(res)
-					this.imgWidth = res.windowWidth - 60 + 'rpx'
-					this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx'
+					this.imgWidth = res.windowWidth - 60
+					this.imgHeight = (res.windowWidth - 60) * 2 - 30
+					console.log('this.imgHeight', this.imgHeight)
 				}
 			})
 			uni.getStorage({
 				key: 'creatorDetail',
 				success: res => {
 					this.creatorInfo = res.data
-					console.log('getStorage', this.creatorInfo)
 					this.creatorInfo.typeList.forEach(item => {
 						this.arrList.push(item.typeName)
 						this.typeIdList.push(item.typeId)
 					})
-					console.log('arrList', this.arrList)
-					console.log('this.typeIdList', this.typeIdList)
+					this.getTypeImgsPage()
 				}
 			})
 		},
-		onLoad(){
+		// 上划加载更多
+		onReachBottom() {
+			console.log(111)
+			if (this.imgList.length > 1) {
+				this.pageNum += 1
 				this.getTypeImgsPage()
+			}
 		},
 		onShareAppMessage(res) {
 			if (res.from === 'button') { // 来自页面内分享按钮
@@ -113,25 +116,17 @@
 			// 标签栏点击
 			onClickItem(e) {
 				this.current = e.currentIndex
-				this.typeId = this.typeIdList[e.currentIndex] 
-				
-				const params = {
-					scanCode: this.creatorInfo.scanCode,
-					typeId: this.typeId,
-					pageNum: this.pageNum,
-					pageSize: this.pageSize,
-				}
-				getTypeImgsPage(params).then(response => {
-					if(response.data.code === 200){
-						this.imgList = response.data.rows
-						console.log('this.imgList',this.imgList)
-					}
-				});
+				this.typeId = this.typeIdList[this.current]
+				this.imgList = []
+				this.getTypeImgsPage()
 			},
 			// 内容滑动
 			changeItem(e) {
-				// console.log('点击', e.detail)
-				// this.current = e.detail.current
+				this.pageNum = 1
+				this.current = e.detail.current
+				this.typeId = this.typeIdList[this.current]
+				this.imgList = []
+				this.getTypeImgsPage()
 			},
 			// 前往详情页
 			targetDetail(item) {
@@ -150,29 +145,30 @@
 			},
 
 			//获取图片分页
-			getTypeImgsPage() {
+			async getTypeImgsPage() {
+				uni.showLoading({
+					title: '加载中'
+				});
 				const params = {
 					scanCode: this.creatorInfo.scanCode,
 					typeId: this.typeIdList[0],
 					pageNum: this.pageNum,
 					pageSize: this.pageSize,
 				}
-				console.log('params',params)
-				getTypeImgsPage(params).then(response =>{
-				console.log('response',response)
-				});
-				
-				// if (res.data.code === 200) {
-				// 	this.imgList = response.data.rows
-				// 	console.log('this.imgList',this.imgList)
-				// } else {
-				// 	uni.showModal({
-				// 		content: '图片列表加载失败！',
-				// 		showCancel: false
-				// 	});
-				// }
+				const res = await getTypeImgsPage(params)
+				if (res.data.code === 200) {
+					this.imgList.push(...res.data.rows)
+					this.swiperHeight = (this.imgHeight + 40) * Math.ceil(this.imgList.length / 2) + 40
+					console.log('this.imgList', this.swiperHeight)
+					uni.hideLoading()
+				} else {
+					uni.hideLoading()
+					uni.showToast({
+						title: res.data.msg,
+						icon: 'none'
+					})
+				}
 			}
-			
 		}
 	}
 </script>