uniapp scroll-view的屏幕滚动适配

209 阅读1分钟

js

<scroll-view class="home-details" :style="{height:scrollHeight}" :scroll-into-view="toView" @scroll="onScroll" scroll-y="true" scroll-with-animation="true">
			<view class="home-detailsPackage"  v-for="(itemse,indexse) in commodityList" :key="itemse.id">
				<view class="home-detailsRecommend" :id="'to'+itemse.id" v-if="itemse.goods">{{itemse.name}}</view>
				<view class="home-detailsType" v-for="(items,index) in itemse.goods" :key="items.id">
					<view class="home-detailsTypeWmImgbox">
						<image class="home-detailsTypeWmImg" @click="items.ptCommodity?previewImgess(items.ptCommodity):''"  :src="items.ptCommodity" ></image>
						<image v-if="items.status==0" class="home-detailsTypeWmImgs" src="../../static/yxj.png" mode=""></image>
					</view>
					<view class="home-detailsTypeItem">
						<view class="home-detailsTypeHead">
							<text class="home-detailsTypeHeadText">{{items.commodityName}}</text>
						</view>
						<view class="home-detailsHotSales">
							<view class="home-detailsHotSalesText">
								门店热销<image class="home-detailsHotSalesImg" src="https://yunxunbucket.oss-cn-shenzhen.aliyuncs.com/tanban_mer/static/images/huo.png" mode=""></image>
							</view>	
						</view>
						<view class="home-detailsmonthText">
							月售1680
						</view>
						<view class="home-detailsOrder">
							<view class="home-detailsOrderleft">
								<image class="home-detailsOrderleftIcon" src="https://yunxunbucket.oss-cn-shenzhen.aliyuncs.com/tanban_mer/static/images/fl-renminbi.png" mode=""></image>
								<text class="home-detailsOrderleftText">{{items.commodityPriceDB}}</text>
							</view>
							<view class="home-shelfBox">
								<view class="home-shelf" v-show="isDelete"  @click="onStatus(items)">
									{{items.status==1?'下架':'删除'}}
								</view>
								<view class="home-shelf" @click="onModify(items)">
									编辑
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

methods

getTopHeight(){
			const query = uni.createSelectorQuery().in(this);
			query.select('.home-navIcon').boundingClientRect(res=>{
				// console.log(res,'res');
				let {height} = res
				this.topheight = height
			}).exec();
		},
                
getInfo(){
			const query = uni.createSelectorQuery().in(this);;
			query.selectAll('.home-detailsPackage').boundingClientRect(data => {
				let hLs = [];
				data.reduce((prev,current,index)=>{
					let h = current.height+prev
					hLs.push(h)
					return h
				},0)
				this.maxListheight = hLs
				
			}).exec();
		},

js

onReady() {
		setTimeout(()=>{
			this.getTopHeight()
			this.getInfo()
		},1000)
		uni.getSystemInfo({
			success: (res) => {
				let query=uni.createSelectorQuery().select(".home-order"); 
				query.boundingClientRect(data=>{
					let topHeight = data.top
					this.scrollHeight = `${res.windowHeight - topHeight}px`;
				}).exec()
			},
		});
	}