当前位置: 首页 > article >正文

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

注释很详细,直接上代码

上一篇

新增内容:
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.kler.cn/a/231296.html

相关文章:

  • 基于YOLOv8的暗光低光环境下(ExDark数据集)检测,加入多种优化方式---自研CPMS注意力,效果优于CBAM ,助力自动驾驶(二)
  • Rust 初体验1
  • vector类的模拟实现
  • DevOps落地笔记-21|业务价值:软件发布的最终目的
  • 【LeetCode】每日一题 2024_2_4 Nim 游戏(找规律,博弈论)
  • 【C语言】位与移位操作符详解
  • Linux第43步_移植ST公司uboot的第4步_uboot测试
  • 分享一下 uniapp 打包安卓apk
  • 【React】如何使antd禁用状态的表单输入组件响应点击事件?
  • Spring GateWay
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItem组件
  • 阿里云ECS服务器Linux安装Mysql8
  • Vue中的 v-if 与 v-show 的区别
  • [项目管理] 如何使用git客户端管理gitee的私有仓库
  • 四:C语言-选择结构
  • 【大模型上下文长度扩展】MedGPT:解决遗忘 + 永久记忆 + 无限上下文
  • Rust 本地文档的使用:rustup doc
  • 【C#】.net core 6.0 设置根目录下某个文件夹可访问,访问创建的图片等资源
  • Appium使用初体验之参数配置,简单能够运行起来
  • rust给py写拓展如此简单