更改组件动画为css动画，页面样式优化

.hbuilderx/launch.json

@@ -2,8 +2,13 @@
     "version" : "1.0",
     "configurations" : [
         {
+            "openVueDevtools" : true,
             "playground" : "standard",
             "type" : "uni-app:app-android"
+        },
+        {
+            "openVueDevtools" : true,
+            "type" : "uni-app:app-ios"
         }
     ]
 }

components/homeDetails/homeDetails.vue

@@ -2,7 +2,7 @@
 	<view v-show="isShow" class="i-h-p100">
 		<scroll-view scroll-y="true" class="i-h-v100" :scroll-top="scrollTop">
 			<view class="animate__animated" :class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
-				<view class="i-h-400"></view>
+				<view class="i-h-200"></view>
 				<view class="i-h-p100 i-flex i-al-center i-jst-center ">
 					<view class="i-w-p80">
 						<view class="i-w-p100">

components/homeList/homeList.vue

@@ -6,10 +6,10 @@
 				<view class="i-pst-r i-t-center i-c-fff animate__animated" 
 				:class="pageStatus===1?'animate__fadeInDown':pageStatus===3?'animate__fadeOutUp':''">
 					<view class="" @click="developConfig()">
-						<span class="i-fs-70 custom-text">金东方国际高中电子宣传</span>
+						<span class="i-fs-70 custom-text">{{title[0]}}</span>
 					</view>
 					<view class="i-mt-26">
-						<span class="i-fs-30 ">学校slogan2</span>
+						<span class="i-fs-30 ">{{title[1]}}</span>
 					</view>
 				</view>
 			</view>
@@ -21,7 +21,7 @@
 							class="i-flex i-al-center i-jst-center">
 							<view class="i-w-p70" :class="index>2?'i-mt-64':''">
 								<view class="i-pst-r i-w-p100" @click="onClick(item)">
-									<image class="i-radius-20 i-w-p100" mode="widthFix" :src="item.type_img">
+									<image class="i-radius-20 i-h-250 i-w-p100" mode="aspectFill" :src="item.type_img">
 									</image>
 									<view class="i-c-fff i-z-index1 i-pst-a i-t-center i-w-p100 i-t-p35">
 										<view>
@@ -64,6 +64,10 @@
 				type: Number,
 				default: 2,
 			},
+			title:{
+				type:Array,
+				default:()=>[]
+			}
 		},
 		watch: {},
 		methods: {

components/pageButton/pageButton.vue

@@ -3,29 +3,31 @@
 		<!-- 头部 -->
 		<view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
 			<view class=" i-flex i-al-center" @click="gotoLast()">
-				<view class="i-radius-p50 i-bd-1">
+				<view class="i-radius-p50 i-bd-1 i-flex i-al-center i-jst-center">
 					<uni-icons type="back" size="1.6rem" color="#FFF"></uni-icons>
 				</view>
 				<span class="i-c-fff i-ml-10 i-fs-30">{{nowTitle}}</span>
 			</view>
 		</view>
 		<!-- 底部按钮 -->
-		<view class="i-pst-f i-r-p21 i-b-p15 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
-			<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
-				@click="gotoLast()">
-				<view class="i-radius-p50 i-bd-3">
-					<uni-icons type="back" size="1.7rem" color="#000"></uni-icons>
+		<view class="i-pst-f i-r-p10 i-b-p15 i-flex i-z-index3">
+			<view class=" animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
+				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
+					@click="gotoLast()">
+					<view class="i-radius-p50 i-bd-3 i-flex i-al-center i-jst-center">
+						<uni-icons type="back" size="1.7rem" color="#000"></uni-icons>
+					</view>
+					<span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
 				</view>
-				<span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
 			</view>
-		</view>
-		<view class="i-pst-f i-r-p10 i-b-p15 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
-			<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
-				@click="gotoBack()">
-				<!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
-					<uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
-				<!-- </view> -->
-				<span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
+			<view class="i-ml-10 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
+				<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
+					@click="gotoBack()">
+					<!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
+						<uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
+					<!-- </view> -->
+					<span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
+				</view>
 			</view>
 		</view>
 	</view>

custom/config.js

@@ -1,6 +1,8 @@
 let baseUrl="https://jdfdzxc.app2.hbdrwh.cn/index.php/promotion/promotion.PromotionApi"
+// let baseUrl="http://www.jdf.com/index.php/promotion/promotion.PromotionApi"
 
 export default{
 	// 获取数据
-	homeData:baseUrl+'/gethomelist'
+	homeData:baseUrl+'/gethomelist',
+	checkDataUpdate:baseUrl+'/checkdataupdate'
 }

custom/data.js

@@ -5,12 +5,29 @@ export default {
 	get_home_list(_this, data = {}, isLoading = false){
 		if(uni.getStorageSync('list')){
 			_this['list'] = uni.getStorageSync('list')
+			_this['title'] = uni.getStorageSync('title')
 		}else{
 			http.Post(config.homeData, data, isLoading).then((res) => {
+				// 数据
 				let list = res['data']['data']
-				uni.setStorageSync('list',list)
 				_this['list'] = list
+				// 系统设置中的标题
+				let titles = res['data']['config']
+				_this.title[0] = titles.title
+				_this.title[1] = titles.subtitle
+				uni.setStorageSync('title',_this.title)
+				uni.setStorageSync('list',list)
 			}).catch(err=>{})
 		}
+	},
+	check_data_update(_this, data = {}, isLoading = false){
+		http.Post(config.checkDataUpdate, data, isLoading).then((res) => {
+			_this['timeStr'] = res['data']['timeStr']
+			if(uni.getStorageSync('timeStr') != _this['timeStr']){
+				// 比对本地缓存与服务器缓存，不同则重新获取数据
+				uni.setStorageSync('timeStr',_this['timeStr'])
+				_this.clearCache()
+			}
+		}).catch(err=>{})
 	}
 }

manifest.json

@@ -72,5 +72,11 @@
     "uniStatistics" : {
         "enable" : false
     },
-    "vueVersion" : "2"
+    "vueVersion" : "2",
+    "h5" : {
+        "router" : {
+            "base" : "/h5/"
+        },
+        "title" : "金东方电子宣传册"
+    }
 }

pages.json

@@ -1,9 +1,9 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/home",
+			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页",
+				"navigationBarTitleText": "金东方电子宣传册",
 				"navigationStyle": "custom",
 				"disableScroll": true,
 				"enablePullDownRefresh": false

pages/index/home.vue

@@ -8,7 +8,7 @@
 		<pageButton :buttonData="buttonData" :isShow="showModel != 'default'" :nowTitle="nowTitle"
 			:pageStatus="pageStatus" @backEvent="backEvent" @tolastEvent="tolastEvent"></pageButton>
 		<!-- 导航 -->
-		<homeList :list="list" :isShow="showModel === 'default'" :pageStatus="pageStatus" @customEvent="homeListEvent"
+		<homeList :list="list" :isShow="showModel === 'default'" :pageStatus="pageStatus" :title="title" @customEvent="homeListEvent"
 			@clearCacheEvent="clearCache">
 		</homeList>
 		<!-- 详情 -->
@@ -25,6 +25,8 @@
 	export default {
 		data() {
 			return {
+				// 后台设置的title
+				title: ['金东方电子宣传册', '副标题'],
 				buttonData: {
 					lastpage: ['default'],
 					lastpageIndex: 0 // 页面计数器
@@ -39,7 +41,8 @@
 				detail_info: {
 					img: '/static/image/homeBg.jpg', // 详情信息
 				},
-				style_type: 1
+				style_type: 1,
+				timeStr:''
 			}
 		},
 		onLoad() {
@@ -48,12 +51,17 @@
 			// 获取数据
 			this.get_data()
 		},
+		onShow() {
+			// 显示时检查后台数据是否刷新
+			this.checkDataUpdate()
+		},
 		watch: {
 			showModel(newVal) {
 				// 回到首页重置返回按钮路径
 				if (newVal == 'default') {
 					this.buttonData.lastpage.splice(0, this.buttonData.lastpage.length)
 					this.buttonData.lastpage.push('default')
+					this.checkDataUpdate()
 				} else if (this.buttonData.lastpage.length === this.buttonData.lastpageIndex) {
 					// 进入内页
 					this.buttonData.lastpage.push(newVal)
@@ -61,6 +69,10 @@
 			}
 		},
 		methods: {
+			// 检查获取更新数据
+			checkDataUpdate(){
+				data.check_data_update(this)
+			},
 			// 执行各组件动画
 			Animation_Controls(model_type) {
 				this.pageStatus = 3
@@ -86,6 +98,7 @@
 				// 清空原有数据
 				this.list = []
 				this.detail_info = {}
+				this.title = []
 				// 重新获取数据
 				this.get_data()
 			},