微信小程序(三十八)滚动容器

注释很详细,直接上代码

上一篇

新增内容:
1.滚动触底事件
2.下拉刷新事件

源码:

index.wxml

<view class="Area">
<!-- 
    scroll-y 垂直滚动
    refresher-enabled  允许刷新
    bindrefresherrefresh 绑定刷新作用函数
    bindscrolltolower 绑定下滑触底作用函数
    refresher-triggered 加载时显示的动态加载效果
    这里演示了最常见的一些,其他的内容感兴趣的读者可以自行研读开发者文档
 -->
    <scroll-view class="areaScroll" scroll-y bindscrolltolower="onScrolltolower" refresher-enabled refresher-triggered="{{isLoading}}" bindrefresherrefresh="onRefresherrefresh">
        <!-- {{activeNum===index?'Active':''}}是选择性添加类名进行渲染 -->
        <view wx:for="{{14}}" wx:key="*this" bind:tap="onClick" mark:index="{{index}}" class="List {{activeNum===index?'Active':''}}">
                {{item}}
        </view>
    </scroll-view>
</view>

index.wxss

page{
    background-color: floralwhite;
}

.Area{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 260rpx;
}

.List{
    text-align: center;
    margin: 20rpx 20rpx;
    padding: 15rpx ;
    background-color: gray;
    border-radius: 30rpx;
}

.Active{
    background-color: pink;
}

.areaScroll{
    height: 370rpx;
}

index.js


Page({
    data:{
        activeNum:0,//当前点击序号
        isLoading:false//下拉加载标志
    },

    onClick(e){
        //解构参数
        const {index}=e.mark

        this.setData({//参数赋值
            activeNum:index
        })
    },
    //触底事件
    onScrolltolower(){
        console.log("已到底!!!\n")
    },
    //下拉事件
    onRefresherrefresh(){

        console.log("正在刷新中!!!")
        //修改下拉标志位
        this.setData({
            isLoading:true
        })

        //延时函数(模拟一下刷新的流程)
        setTimeout(()=>{//修改下拉标志位
            this.setData({
                isLoading:false
            })
        },1000)
        console.log("刷新完成")
    }
})

效果演示:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/378692.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SolidWorks的抽壳

抽壳在建模的时候是比较常见的要求&#xff0c;这里废话不多说&#xff0c;直接开始实例操作。 文章目录 一、规则实体抽壳2、多面抽壳3、空心化抽壳 二、椎体抽壳三、不规则实体抽壳1、不规则实体2、部分实体抽壳 文章随时可能更新&#xff0c;请关注文章原出处&#xff1a; …

【GAMES101】Lecture 19 透镜

目录 理想的薄透镜 模糊 利用透镜模型做光线追踪 景深&#xff08;Depth of Field&#xff09; 理想的薄透镜 在实际的相机中都是用的一组透镜来作为这个镜头 这个因为真实的棱镜无法将光线真正聚焦到一个点上&#xff0c;它只能聚在一堆上 所以方便研究提出了一种理想化的…

vue3的常用功能

文章目录 一、前言二、自动注册全局组件2.1、自动注册components目录下所有vue组件并以组件的文件名为组件的名称2.2、使用这个插件2.3、为全局组件添加类型提示 三、函数式图片预览四、手动封装 svgIcon 组件五、封装拖拽钩子函数六、vscode 中 vue3 代码片段七、最后 一、前言…

C#静态数组删除数组元素不改变数组长度 vs 动态数组删除数组元素改变数组长度

目录 一、使用的方法 1.对静态数组删除指定长度并不改变数长度的方法 &#xff08;1&#xff09;静态数组 &#xff08;2&#xff09;对静态数组删除元素不得改变其长度 2.对动态数组删除指定长度并改变数长度的方法 &#xff08;1&#xff09;动态数组 &#xff08;2&a…

Log4j2漏洞(二)3种方式复现反弹shell

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、前言 明天就是除夕了&#xff0c;提前祝大家&#x…

2023年06月CCF-GESP编程能力等级认证C++编程二级真题解析

一、单选题(每题2分,共30分) 第1题 高级语言编写的程序需要经过以下()操作,可以生成在计算机上运行的可执行代码。 A. 编辑 B. 保存 C. 调试 D. 编译 答案:D 第2题 能够实现下面流程图功能的伪代码是( )。 A. if 条件判断 then 语句块 B. if 条件判断 then 什么…

使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计

1&#xff0c;大模型本地部署 视频说明地址&#xff1a; https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】&#xff08;1&#xff09;&#xff1a;使用x86架构Nvidia消费显卡12G显存&#xff0c;搭建智能终端&#xff0c;将大模型本地化部署&#xff0c;语音交互机…

Git中为常用指令配置别名

目录 1 前言 2 具体操作 2.1 创建.bashrc文件 2.2 添加指令 2.3 使其生效 2.4 测试 1 前言 在Git中有一些常用指令比较长&#xff0c;当我们直接输入&#xff0c;不仅费时费力&#xff0c;还容易出错。这时候&#xff0c;如果能给其取个简短的别名&#xff0c;那么事情就…

一文读懂转融通

最近多家公司都在讲解关于转融通要求。今天我们就来详细聊聊&#xff01; 转融通是一种证券借贷机制&#xff0c;它允许机构投资者在融资融券交易中借入或借出证券。 具体来说&#xff0c;机构投资者可以向券商借入证券&#xff0c;或者将持有的证券借给券商&#xff0c;以扩大…

开源项目的三年,我的项目经历了哪些变化?

0.前言 自己一个项目写了三年&#xff0c;到底写了什么东西了&#xff0c;这个项目经历了哪些变化呢&#xff1f;其中的心路历程如何&#xff1f; 兄弟们&#xff0c;要是感觉我的项目有价值&#xff0c;去b站给俺点点关注呐。我更新的更快。点击下面的了解就可以跳转去b站。…

【VTKExamples::PolyData】第二十三期 InterpolateMeshOnGrid

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例InterpolateMeshOnGrid,并解析接口vtkProbeFilter 、vtkWarpScalar & vtkDealuany2D等多个接口,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步!…

LabVIEW多任务实时测控系统

LabVIEW多任务实时测控系统 面对现代化工业生产的复杂性和多变性&#xff0c;传统的测控系统已难以满足高效、精准、可靠的监控和控制需求。因此&#xff0c;开发一种基于LabVIEW的智能测控系统&#xff0c;能够提高生产效率&#xff0c;保证生产安全&#xff0c;是解决现代工…

java 批量获取修改mp3文件标题、艺术家等内容

前言 java 批量获取&修改mp3文件标题、艺术家等内容 最近下了一本有声小说&#xff0c;文件名称是每一集的集数&#xff0c;但标题全是网址&#xff0c;放到手机音乐播放器名称显示的是标题&#xff0c;完全看不出是哪一集&#xff0c;200多集如果一集一集改怕是手得废掉…

【Spring源码解读!底层原理进阶】【上】探寻Spring内部:BeanFactory和ApplicationContext实现原理揭秘✨

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…

MySQL8.0 最新版下载安装,手把手式的教程,小白都能安装成功!!

1、打开MySQL数据库官网的下载地址,根据自己的操作系统下载对应的安装包。我这里是Windows的,操作步骤如下: https://dev.mysql.com/downloads/installer/2、选择不登录下载 3、等待下载完成 4、然后点击下载下来的安装包 5、选择安装类型,Custom自定义安装 6、接…

io三个练习:

练习一&#xff1a; 使用 四种方式拷贝文件&#xff0c;并统计各自用时 1字节流的基本流&#xff1a;一次读写一个字节 2字节流的基本流&#xff1a;一次读写一个字节数组 3字节缓冲流&#xff1a;一次读写一个字节 4字节缓冲流&#xff1a;一次读写一个字节数组 public clas…

2024幻兽帕鲁服务器多少钱一套?

2024年幻兽帕鲁服务器价格表更新&#xff0c;阿里云、腾讯云和华为云Palworld服务器报价大全&#xff0c;4核16G幻兽帕鲁专用服务器阿里云26元、腾讯云32元、华为云26元&#xff0c;阿腾云atengyun.com分享幻兽帕鲁服务器优惠价格表&#xff0c;多配置报价&#xff1a; 幻兽帕鲁…

【Flink状态管理(二)各状态初始化入口】状态初始化流程详解与源码剖析

文章目录 1. 状态初始化总流程梳理2.创建StreamOperatorStateContext3. StateInitializationContext的接口设计。4. 状态初始化举例&#xff1a;UDF状态初始化 在TaskManager中启动Task线程后&#xff0c;会调用StreamTask.invoke()方法触发当前Task中算子的执行&#xff0c;在…

SolidWorks学习笔记——草图绘制的基本命令

目录 一、进入草图绘制 二、直线命令与删除命令 三、圆弧命令与矩形命令 四、槽口命令以及多边形命令 五、椭圆以及倒角命令 六。草图绘制中的剪裁命令 七、草图中的几何关系 八、草图绘制中的智能尺寸 九、从外部粘贴草图&#xff08;CAD&#xff09; 一、进入草图绘…

机器人运动学林沛群——变换矩阵

对于仅有移动&#xff0c;由上图可知&#xff1a; A P B P A P B o r g ^AP^BP^AP_{B org} APBPAPBorg​ 对于仅有转动&#xff0c;可得&#xff1a; A P B A R B P ^AP^A_BR^BP APBA​RBP 将转动与移动混合后&#xff0c;可得&#xff1a; 一个例子 在向量中&#xff…
最新文章