uniapp实现下拉效果

最新推荐文章于 2024-08-27 17:58:39 发布

热心市名

最新推荐文章于 2024-08-27 17:58:39 发布

阅读量891

点赞数

分类专栏： uniapp 文章标签：前端

本文链接：https://blog.csdn.net/weixin_51363158/article/details/124013110

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有缘再补充

scroll-view
- 设置滚动属性 scroll-y
nvue组件下的list
- 子组件

scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

设置滚动属性 scroll-y

属性名	类型	默认值	说明
scroll-y	`Boolean`	‘Isn’t this fun?’	允许纵向滚动

nvue组件下的list

app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。

子组件

属性名	说明
cell	用于定义列表中的子列表项，类似于 HTML 中的 ul 之于 li。`<list>` 会对 `<cell>` 进行高效的内存回收以达到更好的性能

！！值得一提的是必须给list一个高度，不然滚动不了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

热心市名

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp [全端兼容] - 详细实现下拉菜单筛选效果功能，提供各种条件筛选场景单选、多选、日期时间、自定义插槽、排序上下箭头等（详细示例源代码，全平台兼容支持小程序、H5网站、app、nvue）

王佳斌

04-27

5059

uni-app，vue2，vue3，微信小程序，支付宝小程序，h5网页，移动端网站，安卓app，苹果app，nvue，uniapp所有平台兼容，下拉菜单筛选，下拉式条件筛选，下拉列表，点击排序，级联筛选，日期筛选，下拉框选择器，下拉多条件筛选，下拉式筛选菜单，uniApp如何实现条件下拉筛选，Uniapp官方条件筛选组件，下拉框式条件筛选插件组件，最好用的插件组件，多端兼容，下拉菜单筛选，过滤筛选列表，下拉筛选栏，多列联动的条件筛选，下拉菜单地区和筛选，前端vue uni-app仿美团下拉框下拉筛选组件，

uniapp [全端兼容] - 详细实现下拉筛选菜单功能组件，下拉式筛选菜单效果，类似电商美团点击筛选项底部弹出列表点击选择后自动收起（详细示例代码，全端兼容小程序、安卓苹果app、h5网页、nvue

王佳斌

04-30

4600

uni-app，vue2，vue3，向下弹出菜单包含筛选功能，日期筛选，下拉框选择器，下拉多条件筛选，下拉式筛选菜单，uniApp如何实现条件下拉筛选，Uniapp官方条件筛选组件，下拉框式条件筛选插件组件，最好用的插件组件，多端兼容，下拉菜单筛选，过滤筛选列表，下拉筛选栏，多列联动的条件筛选，下拉菜单地区和筛选，微信小程序，支付宝小程序，h5网页，移动端网站，安卓app，苹果app，nvue，uniapp所有平台兼容，下拉菜单筛选，下拉式条件筛选，下拉列表，点击排序，级联筛选，uniapp 实现下拉筛选

参与评论您还未登录，请先登录后发表或查看评论

uni-app下拉实例模板

04-04

uni-app的点击下拉实例模板，非常好用，可以放心使用。

uni-app下拉框实现

12-18

uni-app下拉框实现，纯原生写法

uniapp u--input实现select下拉列表 input点击事件

热门推荐

有问题可关注公众号：前端研究院后台输入问题回复

07-27

2万+

效果如下：代码: <view class="uni-form-item uni-column"> <picker @change="examinationType" :range="examinationTypeArray"> <label>考试类型：</label> <label class="">{{ examinationTypeArrayType }

uniapp下拉选择组件

abs625的博客

05-11

5105

uniapp下拉选择框

uniapp 自定义下拉框

m0_47559177的博客

03-17

3989

根据 https://gitee.com/kcren/uniapp-dropdown-filter/tree/master自己加了一层封装可以进行切换选择下拉内容模板在components下创建ren-dropdown-filter/ren-dropdown-filter.vue图标的引用和颜色可以自己进行修改请选择{{ navData[actNav?

uniapp 仿微信的右边下拉选择弹出框的实现代码

10-15

在本文中，我们将深入探讨如何使用uniapp框架实现一个仿微信风格的右边下拉选择弹出框。这个组件主要用于提供用户交互，展示一系列可选项，如搜索、门店查询、货号查询等。以下是对实现这一功能的代码进行的详细解析...

uniapp实现上拉刷新下拉加载

05-26

uniapp实现上拉刷新下拉加载，就搜索功能，接口数据还需自己模拟，博客的视频分类中有录屏效果，方便大家查看，在数据模拟中添加了三种状态，即可实现状态的更新与数据的操作，希望可以对大家有所帮助！！

5种uni-app 页面下拉刷新方法-源码示例.zip

01-31

uni-app提供了一个组件，它专门用于实现下拉刷新功能。通过设置`@refresh`事件监听刷新操作，同时可以通过`refreshing`属性控制刷新状态。例如： ```html <view class="dot"></view> <view class="dot"></...

基于uniApp的简单的下拉组件

weixin_41897680的博客

09-07

3851

使用 <ever-code-select ref="select" :showPop.sync="popShow" :list="productionNoList" :popTitle="'产品编码'" @successSelect="successSelect"></ever-code-select> 实现 <template> <view> <u-popup v-model="show" mode="bottom" height="70

uni-app：实现简易自定义下拉列表

weixin_46001736的博客

10-10

4575

uni-app：实现简易自定义下拉列表

uniApp开发小程序(7)使用mescroll配置上啦下拉的样式，以及分类页面的配置

weixin_43288858的博客

04-02

6242

1、mescroll 下拉刷新组件使用第三方 mescroll 下拉刷新组件，使用【wxs+renderjs实现】高性能的下拉刷新上拉加载组件。支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动。 mescroll 官网组件案例 1、在项目中导入插件 2、在main.js中全局引入组件 // 在main.js注册mescroll-body的全局组件 (mescroll-uni用的比较少,且遵循 easycom 规范,会自动按需引入) import MescrollBody f

uni-app（小程序）页面下滑（滚动）至指定高度

qq_44877496的博客

12-17

1573

let scrollTop= 20rpx // 需要下滑的高度，如需下滑至底部，直接给99999就好了 setTimeout(() => { uni.pageScrollTo({scrollTop , duration: 0}); }, 50);

uniapp+uview1：原生列表加载，下拉刷新，上拉加载

本以为成功很简单，没想到活成普通人都需拼尽全力！

03-21

8009

其实，用uniapp已经4年了，写了挺多个小程序，app，我始终坚定，原生的就是最好的，比如原生的导航栏，原生的预览图片，原生的下拉刷新，上拉加载。。。拒绝花里胡哨！之所以写这篇文章是因为，我在uview的交流群里面看到，有相当一部分人关于列表加载这里的处理，处理方式写的很乱，可能上一个列表用一种方法，下个列表就换另一种方式了，我在这里奉上自己多年的列表处理方式，以供参考。。。 1. pages.json里面，我们需要去配置当前页面下拉刷新，上拉加载的一些配置 "path": "pages/in

记录uni-app横屏项目：自定义弹出框

本以为成功很简单，没想到活成普通人都需拼尽全力！

07-20

681

Jay丶萧邦

uniapp 封装弹出下拉框

yjh_OK的博客

08-24

641

【代码】uniapp 封装弹出下拉框。

uni-app屏幕自适应组件

m0_68559944的博客

11-08

941

首先按照easycom规范新建组件2.适配安全区域3.自定义底部 tabBar 边框线小程序中底部 tabBar 的边框线只能定义黑色或白色，在开发中非常不实用，我们来给添加底部边框线的方式来模拟实现 tabBar 边框线的效果。4.基于内置组件实现下拉刷新交互自定义组件本质上就是对内置组件进行的二次封装。

uniapp 下拉效果显示

04-27

在uniapp中实现下拉效果，可以使用uni-ui组件库中的uni-list和uni-list-item组件结合下拉刷新组件uni-refresher来实现。具体步骤如下： 1. 在页面中引入uni-ui组件库 ```html  ...