The uniapp scroll view solves the problems of high adaptability and bullet frame rolling penetration.

Method 1 ：

stay uniapp in scroll view Need to give a fixed height , The height of mobile phones varies according to different ,scroll view Different heights ,uniapp Can't do dom operation , How to make scroll view Adapt to different mobile phone heights , How to calculate the height scroll view Set the height

adopt uni.getSystemInfoSync() Get the dynamic settings of window width and height scroll-view Height :style Dynamic binding height Height

Print uni.getSystemInfoSync()

The height obtained here is the physical height px How to turn it into rpx

 

stay cumputed Calculation attribute settings
 

computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight
			
		}
	}

<scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+'rpx'}">
			//  Content 
</scroll-view>

:style="{height:scrollH+'rpx'}"

This solves the problem ~

Method 2 ：

One 、 Personal analysis
sketch
This problem is actually to calculate the height of existing components and the total height available for the entire page , Calculate the height and then dynamically bind style The style is adaptive .（ Total height - Height of other components = Local scroll-view Adaptive height ）

problem
First , We have this problem , My solution is to search for similar problems , To find the answer , In the process of searching , There are a few questions that confuse me

Where should the method of calculating height be written ？onReady(）,computed(), still methods in ？
How to calculate the total available height of the page ？ How to obtain the height of components ？
How to dynamically bind height ？
answer
1.computed() Belong to vue Knowledge in the framework , When we calculate , Will get used to calculating in the template , This will increase the burden of the template , Thus, a method for implementing simple operations to calculate attributes computed() Method , Learn more about reference articles ：https://cn.vuejs.org/v2/guide/computed.html, And it's written in onReady() It enables the height to be calculated once every time it is loaded , Update height . So I used onReady()

2. Get the total available screen height of the device .

uni.getSystemInfo({
    success: function (res) {
		var windowHeight= res.windowHeight;				
    }
});

Get component height , Use Id Selectors , If there are multiple components, they can be superimposed

let view = uni.createSelectorQuery().select("#head");
					view.boundingClientRect(data => {
						_this.topHeight = data.height;
					}).exec();

3. Dynamic binding height

<scroll-view id="scrollbody" scroll-y="true" :style="{height:scrollerHeight}"></scroll-view>

data  

data() {
			return {
				phoneHeight: 0, // Available screen height 
				topHeight: 0, // Height above slider 
				bottomHeight: 0, // Bottom height 
				scrollerHeight: "",
			}
		},

 

Two 、 Full code display

The front-end code

<template name="home">
	<view>
		<view id="head">
			<view class=" bg-white grid col-4 padding-lr-sm no-border margin-bottom-xs margin-lr-xs">
				<view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in usList"
				 :key="index" @tap="goPage(item.page)">
					<view class="radius text-center">
						<view class="cu-avatar lg" :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'96upx 96upx'}">
							<view class="cu-tag badge" v-if="getTtemDotInfo(item)">{
   {getTtemDotInfo(item)}}</view>
						</view>
						<view class="text-sm margin-top">{
   {item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<scroll-view id="scrollbody" class="bg-white" scroll-y="true" :style="{height:scrollerHeight}">
			<view class="cu-card article no-card">
				<view class="cu-item" style="padding-bottom: 0rpx;" v-for="item in topN5" :key="item.id" @tap="goDetail(item)">
					<view class="title">
						<view class="text-cut">{
   {item.title}}</view>
					</view>
					<view class="content">
						<view class="desc margin-right-sm">
							<view class="text-gray flex align-center justify-between" style="font-size: 12px;">
								<view class="flex align-center justify-between">
									<view class="cu-avatar round sm margin-right-sm" :style="{backgroundImage: 'url('+ item.portrait +')'}"></view>
									<view class="text-grey text-sm text-bold">{
   {item.realname}}</view>
								</view>
							</view>
							<view class="text-content" style="color: #333333;">{
   {item.content}}</view>
						</view>
						<image v-if="item.pics.length >= 1" :src="item.pics[0]" mode="aspectFill"></image>
					</view>
					<view class="text-sm flex justify-between" style="padding: 10upx 30upx 10upx;color: #afafaf">
						<view>
							<text class="cuIcon-attentionfill margin-lr-xs"></text>{
   {item.viewCount}}
							<text class="cuIcon-appreciatefill margin-lr-xs"></text> {
   {item.zanNum}}
							<text class="cuIcon-messagefill margin-lr-xs"></text> {
   {item.commentNum}}
						</view>
						<view class="text-sm">{
   {item.time}}</view>
					</view>
					<view class="padding-bottom-sm bg-gray"></view>
				</view>
			</view>
		</scroll-view>
		
		<view id="foot" class="bg-white cu-tabbar-height"></view>
	</view>
</template>

js Code  

	export default {
		data() {
			return {
				phoneHeight: 0, // Available screen height 
				topHeight: 0, // Height above slider 
				bottomHeight: 0, // Bottom height 
				scrollerHeight: "",
			}
		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					let view = uni.createSelectorQuery().select("#head"); // Local slider 
					view.boundingClientRect(data => {
						_this.topHeight = data.height;
						//console.log("topHeight:"+data.height)
						let otherview = uni.createSelectorQuery().select("#foot");
						otherview.boundingClientRect(data => {
							_this.bottomHeight = data.height
							//console.log("bottomHeight:"+data.height)
							height = _this.phoneHeight - _this.topHeight - _this.bottomHeight;
							//console.log("scrollerHeight:"+height)
						}).exec();
					}).exec();
				},
			}); 
			this.scrollerHeight = height + 'px';
		}

Reference article
These articles are more detailed than me , Confused friends can read these articles ：
https://blog.csdn.net/wosind/article/details/103111292?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

https://blog.csdn.net/qq_37968920/article/details/99191192?utm_medium=distribute.pc_relevant.none-task-blog-searchFromBaidu-4.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-searchFromBaidu-4.control

Demo example
There are no demonstration examples , See if you have time to make it up later , In fact, it's quite simple , Take time to study it and it will soon be solved , The article is for reference only . about vue I also don't learn very well , Make do with it .