技术标签: 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/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 要添加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>
<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>
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>
文章浏览阅读1.3k次。1、题目1090:路径打印时间限制:1 秒内存限制:32 兆特殊判题:否提交:1319解决:230题目描述:给你一串路径,譬如:a\b\ca\d\eb\cstd\你把这些路径中蕴含的目录结构给画出来,子目录直接列在父目录下面,并比父目录向右缩一格,就像这样:a b c d eb cstd同一级的需要按字母顺序_打印目录结构 leetcode
文章浏览阅读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发布安卓
文章浏览阅读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 =
文章浏览阅读152次。AC自动机上的dp
文章浏览阅读871次。C++中 sprintf函数的用法1.常用方式sprintf函数的功能与printf函数的功能基本一样,只是它把结果输出到指定的字符串中了,看个例子就明白了:例:将”test 1 2”写入数组s中#include<stdio.h>int main(int argc, char *avgv[]){ char s[40]; sprintf(s,"%s%d..._sprintf %c
文章浏览阅读2.2k次。医院门诊系统,挂号预约系统,有四个角色(管理员,医生,护士,普通用户)_医院预约挂号er图
文章浏览阅读818次。如果要跑通demo首先: 服务端我是用 intellij idea 开发的。如果用其他软件打跑不起来就用 intellij其次: 要将手机跟电脑连在同个网络下最后: Constants的ip地址要填写上电脑的ip地址实现功能:客户端连接服务端,客户端发数据到服务端,客户端收到服务端发来的数据服务端收到客户端发的数据,服务端发数据给客户端贴部分核心代码客户端连接服务端:首先客户端连接服务端必须要在线程里(后面的是 ip地址 跟端口,端口是服务端的socke..._android socket客户端下载
文章浏览阅读1.3k次,点赞4次,收藏7次。壁纸在文末先上几张美化后的照片 主题链接win 10 美化相信很多人都厌倦了win10原装主题了,陈旧的窗口边框,一如既往的图标,老掉牙的窗口样式和菜单栏……算了,就不吐槽了,直接上教程吧!前方高能第零步关掉杀毒软件(新手建议卸载),这点非常重要,如某数字,某讯,某霸,如果关掉以后放心不下自己电脑的安全,以下文章请勿食用!(后果自负)第一步破解原装win10系统主题。友..._win10联想 自带主题
文章浏览阅读57次。 Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担。一、下载和引用 ..._jq.lazyload.js配置
文章浏览阅读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
文章浏览阅读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线性代数运算
文章浏览阅读3.7k次。源码方式,搭建LAMP环境。_this software is subject to the php license, available in this | | distribut