文章分类 - 微信
摘要：前言小程序适配物理像素小程序中的pxpx和rpx转换应用尾巴前言 本文是微信小程序（本文后面统称小程序）布局技巧系列最后一篇文章，主要说明小程序的屏幕适配问题。本文和系列文章前两篇没有什么必然联系，当然你如果有兴趣，也可以去看看前两篇文章： 微信小程序布局技巧（一）微信小程序布局技巧（二）小程序适配
阅读全文
摘要：微信小程序布局技巧（二） 前言POSITION（定位）常用的定位属性值staticrelativeabsolutefixed定位元素元素层级应用尾巴前言 在上一篇文章中：微信小程序布局技巧（一），我给大家介绍了微信小程序（后面统称小程序）中一些常用的布局技巧。掌握了上一篇文章中的知识能帮助我们实现小
阅读全文
摘要：微信小程序布局技巧（一） 前言小程序布局方式Block布局方式flex布局方式wxss添加样式wxml应用样式效果flex布局种类justify-content属性align-items属性flex-wrap 属性应用尾巴前言 友情提示，阅读本文之前，可能需要有一点微信小程序开发基础。本文旨在为那些
阅读全文
摘要：<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 <block wx:
阅读全文
摘要：模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 定义模板 使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如： <!-- index: int msg: string time: string --> <template n
阅读全文
摘要：wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item <view wx:for="{{array}}"> {{index}}: {{item.message}} <
阅读全文
摘要：前言： 微信小程序的循环实现，通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢？ 1 wx:for 从目前的例子看，wx:for 的使用确实是对数组来做的，参考微信icon示例程序。 示例里面都是对数组进行条件判断，比如iconsizejius就是一个典
阅读全文
摘要：（1）<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{index}}"> <view class="aaa">{{item}}</view> </block> array: [1, 2, 3, 4, 5] 循环结果
阅读全文
摘要：经过一年的发展，微信小程序发展火热，本期就介绍下小程序的一些使用。 在安卓中我们经常会使用ListView/GridView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单，使用block就可以了。 下面我们先看下效果图： 这个布局其实很简单，大致分为3部分，上+下(左
阅读全文
摘要：微信小程序 View 支持两种布局方式：Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明(给父元素)： display:flex;1下面就来介绍下微信小程序的 Flex 布局 先做一个简单的 demo <view class="main"> <
阅读全文
摘要：微信小程序 View 支持两种布局方式：Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明： display:flex; 下面就来介绍下微信小程序的 Flex 布局 先做一个简单的 demo <view class="main"> <view c
阅读全文
摘要：微信小程序页面布局方式采用的是Flex布局。Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适
阅读全文
摘要：display flex容器的属性 1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content flex-direction属性 flex-direction属性决定主轴
阅读全文
摘要：display:inline-block 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding inline-block和float的区别 虽然设置float跟设置inline-block有些特征类似，但两者的区别还是非常明显的: 文档流（Document
阅读全文
摘要：网上分析float、inline-block的使用场景已经有很多文章了，我加入我的理解总结一篇比较全而且精炼的。 共性 相邻元素会在一行显示不换行，直到本行排满，就换行显示。 区别 float： 默认顶部对齐。如遇到上行有空白，而当前元素大小可以挤进去，那么这个元素会在上行补位排列。 float会脱
阅读全文
摘要：关于inline-block 当把元素的display属性设置为inline-block时可以是元素变成行级元素（前后不换行）但是还可以设置一些块级元素的属性，从而实现元素的并列。当然将元素设为浮动也可以实现元素的并列 inline-block和float的比较 文档流：inline-block不会
阅读全文
摘要：inline-block和float大战已经持续了一段时间，有的人钟爱float，整个页面都用的是float布局，而有些人因为float之后的元素会脱离文档流，而钟情于inline-block。今天因为在做任务，使用inline-block出现了一点小问题，为加深记忆，特写此博文。 float 因为
阅读全文
摘要：Inline-block: 1.使块元素在一行显示 2.使内联支持宽高 3.换行被解析 4.不设置宽度，宽度由内容撑开 5.在IE6/7下不支持块标签 Float: 1.使块元素在一行显示 2.使内联元素支持宽高 3.不设置宽度，宽度由内容撑开 4.脱离文档流 5.提升层级半层 元素加了浮动会脱离文
阅读全文
摘要：概念 block是块级元素，会被现实认为是单独的一块，会单独占一行。 常见的block元素有： DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。 inline内联元素，不会产生换行，一系列的inline在一行内显示，直到排满为止。 常见的内联元素有 SPA
阅读全文
摘要：一、首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等 行级元素 与其他元
阅读全文
浙公网安备 33010602011771号