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

注释很详细,直接上代码

上一篇

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

源码:

index.wxml

xml 复制代码
<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

css 复制代码
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

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("刷新完成")
    }
})

效果演示:

相关推荐
拼图20913 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904614 小时前
小程序部分pai
小程序
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184117 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090620 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷2 天前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921432 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview