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

注释很详细,直接上代码

上一篇

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

效果演示:

相关推荐
dccose2 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
尘浮生8 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生12 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen14 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘18 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡21 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285751 天前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序