readme文档

README.md

@@ -11,7 +11,7 @@
 | ｜－style/pages   | 页面样式 | 页面可复用的样式放置到这个文件夹, 不可复用的样式仍放到page的style标签内 |
 | store   | 数据存储 | 固定或临时数据的存储 |
 | unpackage   | hbuilder编译的微信小程序代码 |
-| utils   | 工具类 | request.js 网络请求 <br/> event-bus.js <br/> font.js <br/> auth.js 授权token <br/> index.js 公共函数
+| utils   | 工具类 | request.js 网络请求 <br/> event-bus.js 消息总线 <br/> font.js 加载字体 <br/> auth.js 授权token <br/> index.js 公共函数
 | wxcomponents   | 小程序原生组件 | 
 | ｜－ vant   | vant-weapp组件(请不要重新下载覆盖, 部分组件js有修改, 非必要不修改) | 
 
@@ -59,7 +59,9 @@
 ## 文件目录
 - pages/功能模块/components 用于存放业务相关的组件
 - 根目的components用于存放通用组件
-
+## 参考文档
+- vant-weapp官方文档[vant参考文档](https://vant-ui.github.io/vant-weapp)
+- uniapp文档: [参考文档](https://zh.uniapp.dcloud.io/component/scroll-view.html)
 # FAQ
 ## uni.scss 与 app.scss有什么区别?
 uni.scss可用于定义变量, mixin等, 编译小程序代码后,它会被复制到每一个style元素中.易造成冲突且体积较大<br/>
@@ -99,11 +101,15 @@ export default {
 ## 每个页面都需要放1个nav-bar吗?
 - 是的, 即使不显示nav-bar(如user/login页面)也需要,可以设置组件属性为透明色.
 - nav-bar可以解决浏海屏状态栏高度的问题 
-## 如何在小程序中访问网页
+## 如何在小程序中访问网页?
 - 需要微信小程序后台配置安全域名
 - 通过pages/index/webview组件进行返回
 - this.navigateTo支持访问网络地址,自动调用webview
-
+## 如何实现滚动底部加载更多?
+- 监听 u-scroll-view的scroll-near-lower事件
+- uniapp文档: [参考文档](https://zh.uniapp.dcloud.io/component/scroll-view.html)
+## 如何修改小程序appId
+- 通过hbuilder修改manifest.json
 ## 页面常用的函数?
 ### 导航
 - this.navigateTo(地址) 导航下一个页面(支持https网格地址或pages本地页面地址)

components/common/u-scroll-view/index.vue

@@ -1,16 +1,31 @@
 <template>
-	<scroll-view :scroll-y="true" :style="pageScrollStyle">
+	<scroll-view class="u-scroll-view" :scroll-y="true" :style="pageScrollStyle" @scrolltolower="onScrollToLower" @scroll="onScroll">
 		<slot></slot>
-	</scroll-view>	
+		<view v-if="loadMore" class="load-more"><van-loading>加载中...</van-loading></view>
+	</scroll-view>
 </template>
 
 <script>
+	
+	import VanLoading from '@/wxcomponents/vant/loading/index'
+	
 	export default {
 		options: {
 			styleIsolation: 'shared'
 		},
+		components: {
+			VanLoading
+		},
 		props: {
-			tabbarConflict: Boolean
+			tabbarConflict: Boolean,
+			showEmpty: {
+				type: Boolean,
+				default: false
+			},
+			loadMore: {
+				type: Boolean,
+				default: false
+			}
 		},
 		computed: {
 			pageScrollStyle() {
@@ -31,8 +46,48 @@
 		mounted() {
 		},
 		methods: {
+			getScrollViewHeight() {
+				// 获取 scroll-view 元素的高度
+				uni.createSelectorQuery()
+					.in(this)
+					.select('.u-scroll-view') 
+					.boundingClientRect(rect => {
+						console.log(rect)
+						console.log('scroll-view 高度:', rect.height)
+					})
+					.exec()
+			},
+			onScroll(e) {
+				uni.createSelectorQuery()
+					.in(this)
+					.select('.u-scroll-view')
+					.boundingClientRect(rect => {
+						const scrollTop = e.detail.scrollTop
+						if (scrollTop + rect.height + 100 > e.detail.scrollHeight) {
+							if (this.timer) {
+								clearTimeout(this.timer)
+								this.timer = null
+							}
+							this.timer = setTimeout(() => {
+								this.$emit('scrollNearLower', e)
+							}, 50)
+						}
+					})
+					.exec()
+				this.$emit('scroll', e)
+			},
+			onScrollToLower(e) {
+				this.$emit('scrolltolower', e)
+			}
 		}
 	}
 </script>
 <style lang="scss">
+	.load-more{
+		display: flex;
+		justify-content: center;
+		.van-loading__text{
+			font-size: $fontSize2;
+		}
+	}
 </style>

pages/exhibitor/detail.vue

@@ -60,15 +60,18 @@
 							</button>
 						</view>
 						<view>
-							<view class="iconfont icon-Favourites-Add-Large"></view>
+							<view v-if="exhibitor.favourited" class="iconfont icon-favourites-filled-star-symbol active"></view>
+							<view v-else class="iconfont icon-Favourites-Add-Large"></view>
 							<view>收藏</view>
 						</view>
 						<view>
-							<view class="iconfont icon-Heart"></view>
+							<view v-if="exhibitor.liked" class="iconfont icon-aixin active"></view>
+							<view v-else class="iconfont icon-Heart"></view>
 							<view>点赞</view>
 						</view>
 						<view>
-							<view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
+							<view v-if="exhibitor.voted" class="iconfont icon-Ticket1 active"></view>
+							<view v-else class="iconfont icon-xiaochengxu-toupiaoicon"></view>
 							<view>投票</view>
 						</view>
 					</view>
@@ -113,7 +116,11 @@
 		},
 		data() {
 			return {
-				
+				exhibitor: {
+					favourited: true,
+					liked: false,
+					voted: false
+				}
 			}
 		},
 		created() {

pages/exhibitor/exhibit-detail.vue

@@ -42,15 +42,18 @@
 							</button>
 						</view>
 						<view>
-							<view class="iconfont icon-Favourites-Add-Large"></view>
+							<view v-if="exhibitor.favourited" class="iconfont icon-favourites-filled-star-symbol active"></view>
+							<view v-else class="iconfont icon-Favourites-Add-Large"></view>
 							<view>收藏</view>
 						</view>
 						<view>
-							<view class="iconfont icon-Heart"></view>
+							<view v-if="exhibitor.liked" class="iconfont icon-aixin active"></view>
+							<view v-else class="iconfont icon-Heart"></view>
 							<view>点赞</view>
 						</view>
 						<view>
-							<view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
+							<view v-if="exhibitor.voted" class="iconfont icon-Ticket1 active"></view>
+							<view v-else class="iconfont icon-xiaochengxu-toupiaoicon"></view>
 							<view>投票</view>
 						</view>
 					</view>
@@ -98,7 +101,13 @@
 		},
 		computed: {},
 		data() {
-			return {}
+			return {
+				exhibit: {
+					favourited: true,
+					liked: false,
+					voted: false
+				}
+			}
 		},
 		created() {
 			this.loadFontFace('Poppins')

pages/exhibitor/exhibit.vue

@@ -1,7 +1,6 @@
 <template>
 	<view class="exhibit-index exhibitor-index">
 		<nav-bar title="展品信息" @init="onInitNavbar"></nav-bar>
-		
 		<u-scroll-view>
 			<view class="main-container">
 			<view class="exhibitor-filter">
@@ -109,14 +108,10 @@
 				})
 			},
 			onClickExhibit(item) {
-				uni.navigateTo({
-					url: '/pages/exhibitor/exhibit-detail'
-				})
+				this.navigateTo('/pages/exhibitor/exhibit-detail')
 			},
 			onSearch() {
-				uni.navigateTo({
-					url: '/pages/index/search?query=' + this.searchKeyword
-				})
+				this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
 			}
 		}
 	}

pages/exhibitor/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="exhibitor-index">
 		<nav-bar title="展商信息" @init="onInitNavbar"></nav-bar>
-		<u-scroll-view :tabbar-conflict="true">
+		<u-scroll-view :tabbar-conflict="true" @scroll-near-lower="onScrollToLower">
 			<view class="main-container">
 				<view class="exhibitor-filter">
 					<view>
@@ -98,6 +98,9 @@
 			this.loadFontFace('Poppins')
 		},
 		methods: {
+			onScrollToLower(e) {
+				console.log("滚动接近底部100个像素")
+			},
 			onSelectDropdown(index) {
 				['select1', 'select2', 'select3'].forEach(v => {
 					if (v !== 'select' + index) {
@@ -106,9 +109,7 @@
 				})
 			},
 			onSearch() {
-				uni.navigateTo({
-					url: '/pages/index/search?query=' + this.searchKeyword
-				})
+				this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
 			}
 		}
 	}