uni-app - 使用scss动态配置宫格布局_uniapp图片4宫格布局-程序员宅基地

技术标签: uni-app  

demo 地址: https://github.com/iotjin/jh-uniapp-demo

介绍

uni-app推荐使用scss设置样式
Scss/Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。
使用 Scss/Sass 以及 Scss/Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

用法就不介绍了,看下面
scss/sass中文文档
uni-app官网 Scss/sass介绍和安装使用

实现效果

在这里插入图片描述

common.scss文件

本项目是在common/style/路径下创建的common.scss文件,然后在uni.scss中导入@import '@/common/style/common.scss';
也可以直接在uni.scss中添加,只不过我把拉出来一个common.scss公共文件
其实scss也好,less也好,都可实现相关效果,其实就是动态设置,思路是一样的

以下只添加了和宫格布局相关的样式配置

$grid-boder-width: 1px;
$grid-border-color:#E6E6E6;
//grid-column
@mixin grid-column($col) {
    
	width:100%/ $col;
};

然后是页面的代码

style

style 要添加lang="scss",列数通过@include grid-column(3);这个方法传值控制,传几就是几列,没有写的很复杂,就控制个列数,行数根据数据量自动往后排

<style lang="scss" scoped>
	.grid-bg {
    
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		background: white;
		background: yellow;
		margin: 20rpx;
		border-left: $grid-boder-width solid $grid-border-color;
		border-top: $grid-boder-width solid $grid-border-color;
	}

	.grid-item-bg {
    
		@include grid-column(3);
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		align-content: space-between;
		border-right: $grid-boder-width solid $grid-border-color;
		border-bottom: $grid-boder-width solid $grid-border-color;
	}

	.image {
    
		margin-top: 10px;
		background: orange;
		width: 25px;
		height: 25px;
	}

	.text {
    
		margin-top: 10px;
		display: block;
		text-align: center;
		font-weight: bold;
		color: #000;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>

template

<template>
	<view>
		<view class="grid-bg">
			<view class='grid-item-bg' v-for="(item, index) in dataArr" :key="index" @click="onClickItem(item, index)">
				<view class="image">{
    {
    item.img}}</view>
				<view class="text">{
    {
    item.text}}</view>
			</view>
		</view>
	</view>
</template>

script

<script>
	export default {
    
		data() {
    
			return {
    
				title: "GridView3 - 自定义多列",
				selectIndex: 0,
				dataArr: this.getData()
			}
		},
		onReady() {
    
			uni.setNavigationBarTitle({
    
				title: this.title
			})
		},
		methods: {
    
			onClickItem(item, index) {
    
				this.selectIndex = index
				console.log('点击了宫格:' + index);
				console.log('item' + JSON.stringify(item));
			},
			getData() {
    
				let dataArr = []
				for (let index = 0; index < 18; index++) {
    
					dataArr.push({
     text: "text" + index, url: "url" })
				}
				return dataArr
			}
		}
	}
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iotjin/article/details/118809445

智能推荐

【九度】题目1090:路径打印 && 【LeetCode】Simplify Path_打印目录结构 leetcode-程序员宅基地

文章浏览阅读1.3k次。1、题目1090:路径打印时间限制:1 秒内存限制:32 兆特殊判题:否提交:1319解决:230题目描述:给你一串路径,譬如:a\b\ca\d\eb\cstd\你把这些路径中蕴含的目录结构给画出来,子目录直接列在父目录下面,并比父目录向右缩一格,就像这样:a b c d eb cstd同一级的需要按字母顺序_打印目录结构 leetcode

如何使用Cordova将SAP Fiori应用打包并安装到Android平台上_fiori发布安卓-程序员宅基地

文章浏览阅读591次。There is a wonderful tutorial Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises written by Bertram Ganz.In this blog, I will show step by step how to package the UI5 application built by this tutorial as a native application into your Android device_fiori发布安卓

程序员代码面试指南下(7-9)-程序员宅基地

文章浏览阅读182次。目录第7章 1 不用额外变量交换两个整数的值(士 ★☆☆☆) 2 不用任何比较判断找出两个数中较大的数(校★★★☆) 3 只用位运算不用算术运算实现整数的加减乘除运算 4 整数的二进制表达中有多少个1 5 在其他数都出现偶数次的数组中找到出现奇数次的数 6 在其他数都出现A次的数组中找到只出现一次的数第8章 1 转圈打印矩阵 2 将正方形矩阵顺时针转动90度 3 之..._if (map.containskey(xor)) { int pre = map.get(xor); mosts[i] = pre =

uva-1399 Puzzle-程序员宅基地

文章浏览阅读152次。AC自动机上的dp

C++中 sprintf函数的用法_sprintf %c-程序员宅基地

文章浏览阅读871次。C++中 sprintf函数的用法1.常用方式sprintf函数的功能与printf函数的功能基本一样,只是它把结果输出到指定的字符串中了,看个例子就明白了:例:将”test 1 2”写入数组s中#include&lt;stdio.h&gt;int main(int argc, char *avgv[]){ char s[40]; sprintf(s,"%s%d..._sprintf %c

Java开发的医院门诊挂号系统_医院预约挂号er图-程序员宅基地

文章浏览阅读2.2k次。医院门诊系统,挂号预约系统,有四个角色(管理员,医生,护士,普通用户)_医院预约挂号er图

随便推点

Android Socket Demo [ 附客户端与服务端源码 ]_android socket客户端下载-程序员宅基地

文章浏览阅读818次。如果要跑通demo首先: 服务端我是用 intellij idea 开发的。如果用其他软件打跑不起来就用 intellij其次: 要将手机跟电脑连在同个网络下最后: Constants的ip地址要填写上电脑的ip地址实现功能:客户端连接服务端,客户端发数据到服务端,客户端收到服务端发来的数据服务端收到客户端发的数据,服务端发数据给客户端贴部分核心代码客户端连接服务端:首先客户端连接服务端必须要在线程里(后面的是 ip地址 跟端口,端口是服务端的socke..._android socket客户端下载

定制win10桌面_win10联想 自带主题-程序员宅基地

文章浏览阅读1.3k次,点赞4次,收藏7次。壁纸在文末先上几张美化后的照片 主题链接win 10 美化相信很多人都厌倦了win10原装主题了,陈旧的窗口边框,一如既往的图标,老掉牙的窗口样式和菜单栏……算了,就不吐槽了,直接上教程吧!前方高能第零步关掉杀毒软件(新手建议卸载),这点非常重要,如某数字,某讯,某霸,如果关掉以后放心不下自己电脑的安全,以下文章请勿食用!(后果自负)第一步破解原装win10系统主题。友..._win10联想 自带主题

jQuery懒加载插件 – jquery.lazyload.js简单调用-程序员宅基地

文章浏览阅读57次。 Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。一、下载和引用  ..._jq.lazyload.js配置

mysql_172.25.2.1-程序员宅基地

文章浏览阅读404次。一.cmake升级https://cmake.org/download/ #cmake下载地址 yum install jsoncpp-0.10.5-2.el7.x86_64.rpm jsoncpp-devel-0.10.5-2.el7.x86_64.rpm -y yum install cmake3-3.6.1-2.el7.x86_64.rpm cmake3-data-3.6.1-2.el7.noarch.rpm -y二.mysql编译安装升级gcctar zxf mysql-boost-_172.25.2.1

基于Numpy的线性代数运算_numpy线性代数运算-程序员宅基地

文章浏览阅读737次。标题中的英文首字母大写比较规范,但在python实际使用中均为小写。1.Numpy中的matrix1.1 创建matrix对象numpy.matrix方法的参数可以为ndarray对象numpy.matrix方法的参数也可以为字符串str,示例如下:import numpy as npm = np.matrix("1 2 3;4 5 6; 7 ..._numpy线性代数运算

搭建LAMP环境(源码方式)_this software is subject to the php license, avail-程序员宅基地

文章浏览阅读3.7k次。源码方式,搭建LAMP环境。_this software is subject to the php license, available in this | | distribut