uniapp内使用 mescroll

官网地址:mescroll

这篇文章,主要介绍下mescroll的uni版本,
mescroll-bodymescroll-uni两个组件的使用方式
两种组件的区别如下图
uniapp内使用 mescroll_第1张图片
简单来说,如果我需要局部区域滚动 (如嵌在弹窗,浮层中)就用mescroll-uni
如果整屏滚动,滚动区域内有原生组件, 如video,map,canvas使用mescroll-body性能会更好

先在uniapp项目中导入mescroll插件

插件市场下载地址
uniapp内使用 mescroll_第2张图片
1.3.5之前的版本,下载插件是在components文件内,1.3.5之后根目录会生成uni_modules
这篇文章主要讲解1.3.5之后的使用方式
uniapp内使用 mescroll_第3张图片

1、全屏滚动,内嵌原生组件的推荐使用mescroll-body

<template>
	<view class="login">
		<u-navbar title="首页" :is-back="false" :border-bottom="true" title-color="#333">u-navbar>

		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="banner">
				<u-swiper :list="swiperList" height="300">u-swiper>
			view>
			
			<view class="sticky-tabs" :style="{top:stickyTop}">
				<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change" bg-color="#4A65B3" inactive-color="#FFF">u-tabs>
			view>

			<view class="list u-border-bottom" style="padding: 24rpx;" v-for="(item,index) in 10" :key="index">标题{
  {index}}view>

			

你可能感兴趣的:(uniapp,vue.js,前端,javascript)