小程序案例：九宫格视图

野性酷女 2023-09-29 08:45 21阅读 0赞

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_9_color_FFFFFF_t_70_g_se_x_16]  
代码：

<view style="background-color: rgb(158, 148, 148);width: 720rpx;height: 1000rpx;display: flex;flex-direction: column;align-items: center;">
      <view style="background-color: aqua;height: 200rpx;width: 700rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;">
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
      </view>
    
      
      <view style="background-color: rgb(79, 119, 119);height: 200rpx;width: 700rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;">
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
      </view>
    
    
      
        
        <view style="background-color: rgb(68, 185, 78);height: 200rpx;width: 700rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;">
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
        <view style="background-color: #FFF4F8;width: 200rpx;height: 150rpx;margin-left: 20rpx;border-radius: 10rpx;">1</view>
      </view>
    </view>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cd5b9ac03f20433c90802cf2cd028806.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_9,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python实现九宫格数独小游戏

1 问题有1-9个数字，将他们填入一个3\3的九宫格中，使得他们的每行，每列，以及对角线上的和相等，且要求每个格子的数字不可以重复。使用python列出所有可能的组合。示例

傷城~/ 2024年03月22日 20:52/ 0 赞/ 89 阅读

相关小程序案例：九宫格视图

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_s

野性酷女/ 2023年09月29日 08:45/ 0 赞/ 22 阅读

相关微信小程序杂技之---九宫格图片排版与操作

效果图 ![在这里插入图片描述][20200713201520329.png] 功能：上传，删除，预览，九宫格，多张上传，单张上传 wxml <v

淡淡的烟草味﹌/ 2023年02月26日 02:18/ 0 赞/ 16 阅读

相关微信小程序九宫格实现

一、概述效果图 ![3a28da06960fcd05b38be6f5a66908bb.png][] 二、实现定义数据源 test.js Page

我不是女神ヾ/ 2022年10月05日 15:59/ 0 赞/ 260 阅读

相关九宫格问题

\include <iostream> \include <deque>//STL 双端队列容器 \include<fstream> \include"pos.h"

红太狼/ 2022年08月11日 00:40/ 0 赞/ 253 阅读

相关九宫格问题

“九宫格问题”的Java重写思路：左老师对“九宫格问题” 的讲解不是很详细，可能会给很多人雾里看花的感觉。想学习这个问题先要把这个求解口诀翻译成白话文：一居

曾经终败给现在/ 2022年07月24日 10:10/ 0 赞/ 286 阅读

相关九宫格

将数字 1 …9 填入一个 3×3 的九宫格中，使得格子中每一横行和的值全部相等，每一竖列和的值全部相等。请你计算有多少种填数字的方案。分析: 可用dfs(

谁践踏了优雅/ 2022年06月18日 09:13/ 0 赞/ 279 阅读

相关前端九宫格学习

1.第一种方式（float布局），参照大佬代码，重点元素我已标注 <!DOCTYPE html> <html lang="zh" xmlns:th="http

素颜马尾好姑娘i/ 2022年03月01日 09:56/ 0 赞/ 373 阅读

相关九宫格特效

前言此次九宫格牵扯到了节点之间的距离与位置交换其中有几点重要的思想列举如下： 1. 对于随机颜色的添加（1）可以利用\ffffff 十六进制进

小咪咪/ 2022年02月24日 06:16/ 0 赞/ 329 阅读

相关小程序九宫格

![标题图][1240] > 小程序九宫格效果: ![效果][1240 1] wxml <view class="content"> <view

谁借莪１个温暖的怀抱￠/ 2021年09月17日 03:42/ 0 赞/ 412 阅读