用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序开发之——flex布局和weui-wxss的使用

Rolan 2017-9-4 00:05

flex布局打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码。flex-directionflex-direction属性表示布局的方向 有两个值: row | column 默认属性是row 行布局html代码如下:view class="section" view ...

flex布局

打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码。

flex-direction

flex-direction属性表示布局的方向 有两个值: row | column 默认属性是row 行布局

html代码如下:

<view class="section">
  <view class="section__title">flex-direction: rowview>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果图: 
这里写图片描述

flex-direction: column属性:

<view class="section">
  <view class="section__title">flex-direction: columnview>
  <view class="flex-wrp" style="flex-direction:column;height: 100%;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-direction: column效果图: 
这里写图片描述

justify-content

justify-content:弹性项目在主轴main-axis线上的对齐方式; 值:flex-start | flex-end | 
center | space-between | space-around (注:当横向排列时 主轴就是x轴;反之则是y轴。)

justify-content:flex-start

<view class="section">
  <view class="section__title">justify-content:flex-startview>
  <view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果图: 
这里写图片描述

flex-end | center | space-between | space-around 值同理 
这里写图片描述

align-items

align-Items表示在垂直方向上的布局情况定义在父级容器中; 
有 flex-start | flex-end | center |stretch 四个值。

align-items:flex-start;

<view class="section">
  <view class="section__title">align-items:flex-start;view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果图: 
这里写图片描述 
align-items:center;

<view class="section">
  <view class="section__title">align-items:center;view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果图: 
这里写图片描述

align-items:flex-end;

<view class="section">
  <view class="section__title">align-items:flex-end;view>
  <view class="flex-wrp" style="flex-direction:row;align-items:flex-end;">
    <view class="flex-item bc_green">1view>
    <view class="flex-item bc_red">2view>
    <view class="flex-item bc_blue">3view>
  view>
view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这里写图片描述

源码下载地址:http://download.csdn.net/detail/sundayaaron/9702934述:

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览:

用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)

Github下载地址: 
https://github.com/weui/weui-wxss?from=timeline&isappinstalled=0&utm_source=tuicool&utm_medium=referral

这里写图片描述

使用:

  1. 组件的wxml结构请看dist/example/下的组件
  2. 样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss

使用示例:

  1. 下载weui-wxss压缩包,解压。
  2. 把dist/style/weui.wxss文件放到你项目的根目录(或者其他目录)。
  3. 在app.wxss中添加如下代码:@import 'weui.wxss'; 
    注意:路径要对应上!

接下来我们以SearchBar为例,在自己的小程序里使用SearchBar样式。

  1. 新建快速项目
  2. 去除掉无用代码
  3. 把weui.wxss文件拷贝到项目目录
  4. 在app.wxss里引用样式文件 @import 'weui.wxss';
  5. 新建一个searchbar文件夹,在app.jason中定义searchbar页面
  6. 把weui-wxss里的 weui-wxss-master\dist\example\searchbar 文件都拷贝到你新建的项目 searchbar文件里
  7. 调试、查看结果 
    这里写图片描述
    其他效果同理

demo下载地址: 
http://download.csdn.net/detail/sundayaaron/9709961

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: SundayAaron 来自: csdn

相关阅读