小程序实现Grid布局

最新推荐文章于 2025-04-09 15:06:05 发布

转载最新推荐文章于 2025-04-09 15:06:05 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sfshine/blog/1797246

文章标签：

#python

本文通过一个具体的小程序示例，展示了如何使用flex布局来实现图片轮播效果。包括了index.js中的数据配置及页面加载函数，以及index.wxml中的视图结构定义，并对CSS样式进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

参考

小程序FlexDemo: https://github.com/icindy/wxflex

阮一峰博客:flex详解 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

//index.js
const TAG = "index"
//获取应用实例
const app = getApp()

Page({
    data: {
        datas: ["https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png",
            "https://gitee.com/index/ent_poster/banner_5_1_a.png"]
    },
    onLoad: function () {
        console.log(TAG, "onLoad")
    },
})

<!--index.wxml-->
<view class="parent">
    <block class="parent" wx:for="{{datas}}"> <!--block 是循环打印image-->
        <image class="child" src="{{item}}"></image>
    </block>
</view>

.parent {
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  padding-left: 2%;
  padding-right: 2%;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 44%;
  height: 100px;
  border: 1px solid red;
  margin-top: 4%;
  margin-left: 2%;
  margin-right: 2%;
}

最后效果