小程序案例：九宫格视图

野性酷女 2023-09-29 08:45 6阅读 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 条评论，6人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关九宫格问题

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

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

相关九宫格问题

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

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

相关九宫格

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

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

相关 js实现九宫格

一、js实现九宫格简单分为三大步，具体看代码块注释 1.让每个li能够实现拖拽功能 a).css布局用一个ul,九个li b).获取所有li,循环给每个li绑定on

深碍√TFBOYSˉ_/ 2022年03月17日 14:17/ 0 赞/ 529 阅读

相关前端九宫格学习

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

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

相关九宫格特效

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

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

相关小程序九宫格

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

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