实现横幅对横竖屏的适应

755804376182627 · Jun 22, 2022 · 1df768e · 1df768e
1 parent fddb7d6
commit 1df768e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ unpackage/release/*
 .DS_Store
 */.DS_Store
 config.js
-.idea
+.idea
+.hbuilderx
diff --git a/components/scrollBook.vue b/components/scrollBook.vue
@@ -57,5 +57,13 @@
 	.ellipsis-2row{
 		line-height: 200%;
 	}
+	.hor navigator {
+	  width: 170px;
+	  margin: 3px 15px;
+	}
+	.hor navigator image {
+	  width: 170px;
+	  height: 223.4px;
+	}
 }
 </style>
diff --git a/manifest.json b/manifest.json
@@ -17,6 +17,13 @@
             "autoclose" : true,
             "delay" : 0
         },
+		// 屏幕方向
+		"screenOrientation": [
+		  "portrait-primary",
+		  "landscape-primary",
+		  "portrait-secondary",
+		  "landscape-secondary"
+		],
         /* 模块配置 */
         "modules" : {},
         /* 应用发布信息 */

diff --git a/pages/index/index.vue b/pages/index/index.vue
@@ -6,10 +6,11 @@
 		</view>
 
 		<view v-if="banners.length>0" class="base-padding base-margin-bottom">
-			<swiper :style="'height:'+bannerHeight" :autoplay="autoplay" :indicator-dots="indicatorDots" :interval="interval"
-			 :duration="duration">
+			<swiper :style="'height:'+bannerHeight" :autoplay="autoplay" :indicator-dots="indicatorDots"
+				:interval="interval" :duration="duration">
 				<swiper-item v-for="banner in banners" :key="banner.id" class="radius-basic">
-					<image @click="bannerClick" :data-url="banner.link" :src="banner.image" :style="'height:'+bannerHeight+';width:'+bannerWidth"></image>
+					<image @click="bannerClick" :data-url="banner.link" :src="banner.image"
+						:style="'height:'+bannerHeight+';width:'+bannerWidth"></image>
 				</swiper-item>
 			</swiper>
 		</view>
@@ -40,7 +41,8 @@
 			<view v-if="category.books" class='panel base-padding base-margin-bottom'>
 				<view class='panel-heading'>
 					<view class='panel-title font-lv1 strong'>{{category.title}}
-						<navigator :url="'/pages/list/list?tab=new&cid='+category.id" class='pull-right color-link font-lv3'>更多</navigator>
+						<navigator :url="'/pages/list/list?tab=new&cid='+category.id"
+							class='pull-right color-link font-lv3'>更多</navigator>
 					</view>
 				</view>
 				<view class='panel-body'>
@@ -112,13 +114,23 @@
 				if (this.showHeaderSearch == true) this.showHeaderSearch = false
 			}
 		},
+		onResize(e) {
+			let that = this
+			let info = uni.getSystemInfoSync()
+			let oriInfo = util.getSysInfo()
+			let newInfo = {...oriInfo, ...info}
+			util.setSysInfo(newInfo)
+			// 重新计算横幅的宽高
+			that.bannerWidth = parseFloat(that.bannerWidth.split("px")[0])*((e.size.windowWidth -60 )/ e.size.windowHeight) + 'px'
+			that.bannerHeight = parseFloat(that.bannerHeight.split("px")[0])*((e.size.windowWidth -60 ) / e.size.windowHeight) + 'px'
+		},
 		methods: {
-			 adLoad() {
-			    this.adLoaded =  true
-			  },
-			  adClose() {
-			    this.adClosed = true
-			  },
+			adLoad() {
+				this.adLoaded = true
+			},
+			adClose() {
+				this.adClosed = true
+			},
 			loadData() {
 				let that = this
 				let cids = []
@@ -163,7 +175,8 @@
 							that.bannerWidth = width / info.pixelRatio + "px"
 							that.bannerHeight = height / info.pixelRatio + "px"
 						}
-						if (resRecommendBooks.data && resRecommendBooks.data.books) recommendBooks = resRecommendBooks.data.books
+						if (resRecommendBooks.data && resRecommendBooks.data.books) recommendBooks =
+							resRecommendBooks.data.books
 						if (resBookLists.data && resBookLists.data.books) {
 							bookLists = resBookLists.data.books
 							categories = categories.map(function(category) {