在uni-app中,如果你想要让scroll-view组件自动滚动到底部,你可以按照以下步骤来实现: 确定scroll-view组件的当前位置: 通常,scroll-view的当前位置可以通过其内部滚动条的位置来确定。但是,为了滚动到底部,我们主要关注的是如何设置滚动目标位置,而不是当前位置。 编写代码以自动滚动scroll-view: 你可以使用uni-app提供...
scroll-view没有设置固定高, 在css中设置height, 设置多高就在多高的区域展现. 比如设置高为50vh(100vh为满屏), 则组件里边的内容只会在半屏内上下滚动,不会触发page的滚动条只会触发scroll-view的滚动条. 如果高度不好给确定值, 可以使用scss(lang='scss')中的calc计算, 例子中有体现.(注意使用calc计算时,...
如图可见,在页面滚动过程中,顶部导航栏和底栏未动,仅中间的内容区域可滚动。 整个页面的高度设置为 100%,并采用 flex 布局 滚动区域的高度,通过flex布局的flex-grow实现自适配 <template> <!-- 顶部--自定义的导航栏 --> <CustomNavbar /> <!-- 中间--自适配高度的滚动区 --> <scroll-view scroll-y ...
回答:内容自动滚动到可视化区域的底部,你可以自己写一个函数,在页面加载完成后调用即可,这个功能一般不需要采用组件来实现,书写起来也并不复杂,简单的逻辑如下: function getMaxHeight() { messageContainer = document.getElementsByClassName("message-container")[0]; messageContainer.scrollTo({ top: messageContainer...
scroll-view是必不可少的! 这里需要用到scroll-view的标签属性scroll-into-view scroll-into-view 值应为某子元素id id不能以数字开头 设置哪个方向可滚动,则在哪个方向滚动到该元素 开始 布局部分示例 <scroll-viewscroll-y="true":scroll-info-view="childrenId"><viewv-for="(item,index) in msg":key=...
</view> </template> exportdefault{ data() {return{ refresh:false, info: [], } }, computed: { scrollH:function() { let sys=uni.getSystemInfoSync(); let winWidth=sys.windowWidth; let winrate= 750 /winWidth; let winHeight= parseInt(sys.windowHeight *winrate);returnwinHeight; }, }, ...
如果scroll-view有多个,要每个用自己的 triggered和refreshing来控制。 代码如下,和官方差不多,注意有关键的几个细节不同。 exportdefault{ data() {return{triggered:false, _freshing:false} }, onLoad() {this._freshing =false; setTimeout(()=>{this.triggered =true;//触发onRefresh来加载自己的数据,如果...
</scroll-view> 1. 2. 3. 4. 5. 需要注意的是 scroll-view一定要给固定高度 根据自己的需求进行计算得到即可 js部分的代码 data(){ return{ scrollTop: 0, isEnd: false, triggered: false, isfreshing: false, isShowList: true, } },
我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求,不需要安装better-scrolluniapp 自带的scroll-view 就可以实现了。 实现左右滑动 <view class="model_scrollx flex_row"> <scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'"> ...