loadmore属性hasmore增加响应式

components/fs-action/fs-action.vue

@@ -1,51 +1,49 @@
 <template>
 	<fs-popup direction="bottom" height="auto" v-model="visible" :showMask="showMask" :maskClickable="maskClickable">
 		<view class="fs-action">
-			<view class="fs-action-item" v-for="(item, index) in list" :key="index" @click="handleAction(item)">{{item.name}}</view>
-			<view class="fs-action-extra">
-				<slot></slot>
+			<view class="fs-action-item" v-for="(item, index) in list" :key="index" @click="handleAction(item)">
+				{{ item.name }}
 			</view>
-			<view class="fs-action-cancel" v-if="showCancel" @click="cancel">{{cancelText}}</view>
+			<view class="fs-action-extra"><slot></slot></view>
+			<view class="fs-action-cancel" v-if="showCancel" @click="cancel">{{ cancelText }}</view>
 		</view>
 	</fs-popup>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-	list: Array,
-	modelValue: Boolean,
-	showMask: {
-		type: Boolean,
-		default: true
-	},
-	maskClickable: {
-		type: Boolean,
-		default: true
-	},
-	cancelText: {
-		type: String,
-		default: '取消'
-	},
-	showCancel: {
-		type: Boolean,
-		default: true
-	}
-})
-const emits = defineEmits(['update:modelValue', 'change'])
-
-const visible = computed(
-	{
-		get: () => props.modelValue,
-		set: value => emits('update:modelValue', value)
-	}
-)
-
-const cancel = () => {
-	emits('update:modelValue', false)
-}
-const handleAction = item =>  {
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	list: Array,
+	modelValue: Boolean,
+	showMask: {
+		type: Boolean,
+		default: true
+	},
+	maskClickable: {
+		type: Boolean,
+		default: true
+	},
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	showCancel: {
+		type: Boolean,
+		default: true
+	}
+})
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const visible = computed({
+	get: () => props.modelValue,
+	set: value => emits('update:modelValue', value)
+})
+
+const cancel = () => {
+	emits('update:modelValue', false)
+}
+const handleAction = item => {
 	emits('change', item)
 	cancel()
 }
@@ -53,23 +51,23 @@ const handleAction = item =>  {
 
 <style lang="scss" scoped>
 .fs-action {
-	background-color: #f8f8f8;
-	
-	&-item {
-		padding: 20rpx;
-		text-align: center;
-		background-color: #fff;
-	
-		&+& {
-			border-top: 1px solid var(--border-color);
-		}
-	}
-	
-	&-cancel {
-		padding: 20rpx;
-		text-align: center;
-		background-color: #fff;
-		margin-top: 10rpx;
+	background-color: #f8f8f8;
+
+	&-item {
+		padding: 20rpx;
+		text-align: center;
+		background-color: #fff;
+
+		& + & {
+			border-top: 1px solid var(--border-color);
+		}
+	}
+
+	&-cancel {
+		padding: 20rpx;
+		text-align: center;
+		background-color: #fff;
+		margin-top: 10rpx;
 	}
 }
 </style>

components/fs-loadmore/fs-loadmore.vue

@@ -3,13 +3,13 @@
 		<slot></slot>
 		<fs-empty v-if="!state.loading && !state.dataList.length"></fs-empty>
 		<template v-else>
-			<fs-divider v-if="!state.hasMore">{{nomore}}</fs-divider>
+			<fs-divider v-if="!state.hasMore">{{ nomore }}</fs-divider>
 		</template>
 	</view>
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 
 const props = defineProps({
 	modelValue: {
@@ -43,23 +43,26 @@ const state = reactive({
 	hasMore: true
 })
 
-const query = (loadmore) => {
+const query = loadmore => {
 	state.loading = true
 	if (loadmore) {
 		state.pageNo++
-	} else{
+	} else {
 		state.pageNo = 1
 	}
-	return props.fetchList({
-		pageNo: state.pageNo,
-		pageSize: props.pageSize
-	}).then(res => {
-		state.hasMore = res.length >= state.pageSize
-		state.dataList = loadmore ? [...state.dataList, ...res] : res
-		emits('update:modelValue', state.dataList)
-	}).finally(() => {
-		state.loading = false
-	})
+	return props
+		.fetchList({
+			pageNo: state.pageNo,
+			pageSize: props.pageSize
+		})
+		.then(res => {
+			state.hasMore = res.length >= state.pageSize
+			state.dataList = loadmore ? [...state.dataList, ...res] : res
+			emits('update:modelValue', state.dataList)
+		})
+		.finally(() => {
+			state.loading = false
+		})
 }
 props.autoCall && query()
 
@@ -72,11 +75,9 @@ const refresh = () => {
 defineExpose({
 	query,
 	refresh,
-	hasMore: state.hasMore,
+	hasMore: toRef(state, 'hasMore'),
 	pullDownRefresh: props.pullDownRefresh
 })
 </script>
 
-<style>
-
-</style>
+<style></style>

components/fs-readmore/fs-readmore.vue

@@ -43,9 +43,7 @@
 			}
 		},
 		mounted() {
-			uni.createSelectorQuery().in(this).select('.fs-readmore-content').boundingClientRect(data => {
-				this.visible = data.height > this.height
-			}).exec()
+			this.updateHeight()
 		},
 		computed: {
 			height() {
@@ -55,6 +53,11 @@
 		methods: {
 			handleToggle() {
 				this.isOpen = !this.isOpen
+			},
+			updateHeight() {
+				uni.createSelectorQuery().in(this).select('.fs-readmore-content').boundingClientRect(data => {
+					this.visible = data.height > this.height
+				}).exec()
 			}
 		}
 	}

hooks/useLoadmore/index.js

@@ -1,31 +1,40 @@
-import { reactive, onMounted, getCurrentInstance } from 'vue'
-import { onReachBottom, onShow, onPullDownRefresh, onReady } from '@dcloudio/uni-app'
-
-export default loadmoreRef => {
-	let refs = {}
-	
-	const refresh = () => {
-		refs[loadmoreRef] && refs[loadmoreRef].refresh()
-	}
-	
-	onMounted(() => {
-		refs = getCurrentInstance().refs
-	})
-	
-	onPullDownRefresh(() => {
-		if(refs[loadmoreRef].pullDownRefresh) {
-			refs[loadmoreRef].hasMore = true
-			refs[loadmoreRef].query().then(() => uni.stopPullDownRefresh())
-		}
-	})
-	
-	onReachBottom(() => {
-		if(refs[loadmoreRef].hasMore) {
-			refs[loadmoreRef].query(true)
-		}
-	})
-	
-	return {
-		refresh
-	}
-}
+import {
+	reactive,
+	onMounted,
+	getCurrentInstance
+} from 'vue'
+import {
+	onReachBottom,
+	onShow,
+	onPullDownRefresh,
+	onReady
+} from '@dcloudio/uni-app'
+
+export default loadmoreRef => {
+	let refs = {}
+
+	const refresh = () => {
+		refs[loadmoreRef] && refs[loadmoreRef].refresh()
+	}
+
+	onMounted(() => {
+		refs = getCurrentInstance().refs
+	})
+
+	onPullDownRefresh(() => {
+		if (refs[loadmoreRef] && refs[loadmoreRef].pullDownRefresh) {
+			refs[loadmoreRef].hasMore = true
+			refs[loadmoreRef].query().then(() => uni.stopPullDownRefresh())
+		}
+	})
+
+	onReachBottom(() => {
+		if (refs[loadmoreRef] && refs[loadmoreRef].hasMore) {
+			refs[loadmoreRef].query(true)
+		}
+	})
+
+	return {
+		refresh
+	}
+}

package.json

@@ -1,20 +1,20 @@
-{
-  "name": "fs-uni",
-  "version": "2.5.2",
-  "description": "",
-  "main": "main.js",
-  "dependencies": {
-    "async-validator": "^4.0.2",
-    "dayjs": "^1.10.6"
-  },
-  "devDependencies": {},
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://git.sxidc.com/front-end/fs-uni-next.git"
-  },
-  "author": "",
-  "license": "ISC"
+{
+	"name": "fs-uni",
+	"version": "2.5.4",
+	"description": "",
+	"main": "main.js",
+	"dependencies": {
+		"async-validator": "^4.0.2",
+		"dayjs": "^1.10.6"
+	},
+	"devDependencies": {},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://git.sxidc.com/front-end/fs-uni-next.git"
+	},
+	"author": "",
+	"license": "ISC"
 }

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<fs-swiper :list="list1"></fs-swiper>
-		
+
 		<fs-grid :columnNum="4">
 			<fs-grid-item>
 				<view class="text-center">
@@ -28,15 +28,17 @@
 				</view>
 			</fs-grid-item>
 		</fs-grid>
-		
-		<fs-cell border align="stretch" v-for="(item,index) in 3" :key="index">
+
+		<fs-cell border align="stretch" v-for="(item, index) in 3" :key="index">
 			<template #title>
 				<fs-avatar shape="square" radius width="240rpx" height="180rpx" src="/static/images/banner.png"></fs-avatar>
 			</template>
 			<template #value>
 				<view class="fs-cell-right">
 					<view class="title">图文标题</view>
-					<view class="content line2">图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容</view>
+					<view class="content line2">
+						图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容图文内容
+					</view>
 					<view class="sub">2021-09-15</view>
 				</view>
 			</template>
@@ -59,7 +61,7 @@ const list1 = [
 </script>
 
 <style lang="scss" scoped>
-.menu-item{
+.menu-item {
 	margin-top: 6rpx;
 	font-size: 14px;
 }