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

注释很详细,直接上代码

上一篇

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

效果演示:

相关推荐
從南走到北1 小时前
西陆房产系统小程序
微信·微信小程序·小程序
future_studio3 小时前
聊聊 Unity(小白专享、C# 小程序 之 自动更新)
unity·小程序·c#
黑马源码库miui520864 小时前
同城派送小程序
微信小程序·小程序
攻城狮-申5 小时前
小程序uview actionSheet 内容过多高度设置
小程序·uview·hb
ybb_ymm6 小时前
从需求开始至架构设计的适用于商家及小吃摊的点餐小程序
小程序·apache
2501_915106326 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_916007476 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
阿登林7 小时前
如何利用扣子生成小程序并进行发布指南
小程序·扣子
全职计算机毕业设计8 小时前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序