微信小程序开发之布局奇盈绝技

1.微信小程序对flex流式布局支持的相当不错，甚至有些地方可以使用flex进行修复操作
如在设置image这个标签的时候，内设有个10rpx的底部空间，假如这个空间背景为黑色，那么10rpx这个底部空间就会变成黑色，假如是白色，那就是白色，所以不处理这个底部空间，有可能会影响整体美观，做法很简单

display:flex

在图片样式上面加上这个流式显示，这个底部空间就消失了，是不是很神奇？
2.既然我们谈到了背景颜色，那么微信小程序如何修改背景颜色的呢？
我们有两种做法:首先我们可以在骨架上面包装个整体的层，将这个层这样设置样式

width:100%;
height:100%;
background-color:#******

是不是恍然大悟？
其实我们还可以这样干，我们分析下编译好的骨架，我们可以看到微信小程序这个骨架最终的结果是

<page></page>

那么我们可以这样设置

page{background:"************"
}

3.在我们使用scroll-view的时候呢，我们会发现一个问题，flex布局好像不生效啊，它真的是不支持flex吗？前边说过小程序其实对flex布局支持的相当好，不会被打脸了吧，我们回归文档看一看scroll-view

原来是没开启这个功能！！~~
4.在做scroll-view的时候底下留了好大一块区域，但是我们也没定高和宽，这时候该怎么办呢？
我们可以在scroll-view下面包装一层

<scroll-view scroll-x enable-flex><view></view>
</scroll-view>

我们会发现还是没有什么用，这时候就该猜测是不是我们动用了什么组件里面某个属性，当我们吧enable-flex去除之后，多余区域神奇般的消失了~~~

<scroll-view scroll-x><view></view>
</scroll-view>

5.说到定高和宽，这里提醒一下。没有特殊要求，不要定高宽，让组件本身把高和宽顶起来。
6.wxs的使用小记录,wxs是微信小程序嵌入wxml中的一种用法，其写法和js一样，我们首先具体格式如下

<wxs module="xxx" src="xxx"></wxs>

当我们想做渲染的时候
我们可以直接调用wxs里面的方法，进行渲染，我目前使用wxs做过滤器
7.当我们两个模块设计图是这样的

我们该如何用flex进行处理呢？
首先，我们可以把这个看做成左和右两个模块，右模块可以分为上下两个模块，左右模块设计师假如有刻意留边距的时候，这个width肯定不是做到100%的，我们可以先把大的模块整体设置100%width，然后图片正常尺寸设计，

display:flex;
flex-direction:row;
justify-content:space-between

这样做的样式就是左模块往左，右模块往右，中间就会留个间距出来了。
右上，右下也是同理。
8.更了这么多，也谈谈对产品的思考
京东和淘宝大家都知道是电商，其实这两个有一部分地方不一样，淘宝一般用来没事逛逛，而京东呢，一般用户群体带有明显的购物目的，因为自营用起来是比较放心的，淘宝可能需要货比货，这就影响了许多格局方面的问题，比如sku方面的设计，ui的设计，心理学之类的东西。
9.如何动态的去调整图片大小,而不改变图片的长宽比例
关于这个问题呢，小程序已经帮我们想到了，也就是说在我们来看看文档是怎么写的

image组件中有个mode选项，
这么多模式可以选择，所以我们可以轻而易举的进行缩放，
但是问题来了，当我们的width固定不是350rpx，假如是340rpx，那又如何控制缩放呢，
其实微信小程序在监听图片尺寸上开放了个接口，我们还是回归文档看一下

我们可以使用这个方法对图片进行监听，得出width和height，长和高的比进行计算
公式也很简单，就是 h/w=newh/neww
这样我们就可以求出按这个比例算出的长和宽了，

    <imagebind:load="imgLoad" ></image>imgLoad(e){console.log(e)const {width,height}=e.detailconsole.log(width,height)//width / height= 340 / heightlet percent=width/heightthis.setData({w:340,h:width/percent})}

等等，那该如何动态赋值?
我们可以进行这样改造

<image bind:load="imgload" style="height:{{h}}rpx;width:{{w}}rpx"></image>

这样子，我们就可以动态获取h和w了~~~

微信小程序开发之布局奇盈绝技相关推荐

微信小程序开发 — Flex布局
前言微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
微信小程序开发教程：项目四组件布局课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简单地介绍微信小程序flex布局的使用. 2.如何 ...
微信小程序开发之——flex布局
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码. flex-direction flex-direction属性表示布局的方向有两个值: row | column 默认属性是 ...
微信小程序开发实现宫格布局
微信小程序开发实现宫格布局问题背景客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析先上效果图 ...
微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...

微信小程序开发之布局奇盈绝技

微信小程序开发之布局奇盈绝技相关推荐

最新文章

热门文章