学习微信小程序的第二天——实现滚动的效果

最新推荐文章于 2024-05-16 00:37:22 发布

斯特凡今天也很帅

最新推荐文章于 2024-05-16 00:37:22 发布

阅读量1.5k

点赞数

分类专栏：微信小程序文章标签：微信小程序学习 css

本文链接：https://blog.csdn.net/weixin_41311528/article/details/126308837

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、说明

(1)首先在视图的基础上，

<!--pages/list/list.wxml-->
<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

(2)设置一个滚动的视图（如下）
横向滚动为 scroll-x 纵向滚动为 scroll-y
在这里插入图片描述

二、代码

(1) list.wxml

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

(2)list.wxss

/* pages/list/list.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.container1 view:nth-child(1){
    background-color: lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightcoral;
}

.container1{
    border: 1px solid red;
    /*给scroll-view固定高度*/
    width:120px;
    height: 120px;
}