01-1简易轮播+九宫格页面

溥仪仍然会

已于 2024-03-10 18:34:58 修改

阅读量316

点赞数 7

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

于 2024-03-10 18:34:11 首次发布

本文链接：https://blog.csdn.net/weixin_62057336/article/details/136606217

版权

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

3 篇文章 0 订阅

订阅专栏

01-1简易轮播+九宫格页面

效果如图

在这里插入图片描述

用到的组件：

swiper（轮播组件）、flex布局（自适应页面）

<!-- 案例1-1 .wxml -->
<swiper current="2" indicator-dots="true" indicator-color="blue" indicator-active-color="red" autoplay="true" interval="3000" circular="true">
    <swiper-item>
        <image src="/images/2.webp" />
    </swiper-item>
    <swiper-item>
        <image src="/images/3.webp " mode="scaleToFill" />
    </swiper-item>
    <swiper-item>
        <image src="/images/4.webp " mode="scaleToFill" />
    </swiper-item>
</swiper>

<view class="demo">
    <view class="item">
        <image src="/images/10009.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/10010.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/a007.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b005.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b006.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b007.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b008.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b009.png" />
        <text>上</text>
    </view>
    <view class="item">
        <image src="/images/b010.png" />
        <text>上</text>
    </view>

</view>

.demo{
    display: flex;
    flex-wrap: wrap;
}
.demo .item{
    width: 250rpx;
    height: 250rpx;
    border-right: 5rpx solid #eee;
    border-bottom: 5rpx solid #eee;
    box-sizing: border-box;
    /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
    display: flex;
    flex-direction: column;		/* 文本行堆叠的方向 */
    justify-content: center;
    align-items: center;
}
.demo .item:nth-child(3){  
    border-right: 0;		/* 右边框 */
}
.demo .item:nth-child(6){
    border-right: 0;
}
.demo .item:nth-child(9){
    border-right: 0;
}
.demo .item image{
    width: 80rpx;
    height: 80rpx;
}
.demo .item text{
    color: rgb(7, 89, 241);
    font-size: 36rpx;
    margin-top: 16rpx;
}