【uniapp】mescroll-body-part & mescroll-uni-part

原创

已于 2024-01-04 14:31:46 修改 · 1.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2023-12-02 17:17:29 首次发布

这篇文章详细介绍了mescroll-uni组件，一个高性能的用于微信小程序的下拉刷新和上拉加载解决方案，它支持局部滚动和使用flex布局嵌入页面。文中展示了如何在Vue3项目中集成并处理异步数据加载和菜单切换。

在这里插入图片描述

mescroll.com http://www.mescroll.com/uni.html#load
mescroll-uni_1.3.8_example 高性能下拉刷新上拉加载组件支持vue3 setup - 插件市场

mescroll-uni-part

<template>
	<!-- mescroll-uni本质是scroll-view,支持局部区域滚动,可使用flex布局灵活的嵌在某个view中 -->
	<!-- mescroll-body只能靠fixed定位其他元素变相实现'局部滚动' -->
	<view class="page-warp">
		<view class="top-warp">
			<view>顶部区域</view>
			<view style="font-size: 24rpx;">mescroll-uni 支持局部区域滚动,支持使用flex嵌在某个view</view>
		</view>
		<view class="center-warp">
			<!-- 左边 -->
			<scroll-view class="left-warp" :scroll-y="true">
				<view class="tab" :class="{active:i==tabIndex}" v-for="(tab,i) in tabs" :key="i" @click="tabChange(i)">{
  
  {tab}}</view>
			</scroll-view>
			<view class="right-warp">
				<!--右边 :fixed="false", 高度跟随父元素 (不在组件上定义class,避免部分小程序平台编译丢失, 如支付宝,钉钉小程序) -->
				<mescroll-uni :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<good-list :list="goods"></good-list>
				</mescroll-uni>
			</view>
		</view>
		<view class="bottom-warp"> 底部区域 </view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
     
     apiGoods, apiGetTabs} from "@/api/mock.js"
	export<

最低0.47元/天解锁文章