v2.0.2

v2.0.2 2.0版本上线

demo/pages/basics/layout/layout.js

@@ -0,0 +1,16 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    TabCur:0,
+    tabNav: ['Flex布局', 'Grid布局', '辅助布局']
+  },
+  tabSelect(e) {
+    console.log(e);
+    this.setData({
+      TabCur: e.currentTarget.dataset.id,
+      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
+    })
+  }
+})

demo/pages/basics/layout/layout.json

@@ -0,0 +1 @@
+{}

demo/pages/basics/layout/layout.wxml

@@ -0,0 +1,185 @@
+<custom style="height:{{CustomBar}}px;">
+  <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 布局
+    </navigator>
+  </bar>
+</custom>
+<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
+  <item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
+    {{tabNav[index]}}
+  </item>
+</scroll-view>
+<block wx:if="{{TabCur==0}}">
+  <bar class="solid-bottom margin-top">
+    <view class='action'>
+      <icon class='icon-title text-blue' />固定尺寸
+    </view>
+  </bar>
+  <view class="padding bg-white">
+    <view class="flex flex-wrap">
+      <view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
+      <view class='basis-df'></view>
+      <view class='basis-sm bg-grey margin-xs padding-sm radius'>sm(40%)</view>
+      <view class='basis-df'></view>
+      <view class='basis-df bg-grey margin-xs padding-sm radius'>sub(50%)</view>
+      <view class='basis-lg bg-grey margin-xs padding-sm radius'>lg(60%)</view>
+      <view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
+    </view>
+  </view>
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />比例布局
+    </view>
+  </bar>
+  <view class="padding bg-white">
+    <view class="flex">
+      <view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
+      <view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
+    </view>
+    <view class="flex  p-xs margin-bottom-sm mb-sm">
+      <view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
+      <view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
+    </view>
+    <view class="flex  p-xs margin-bottom-sm mb-sm">
+      <view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
+      <view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
+      <view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
+    </view>
+  </view>
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />水平对齐(justify)
+    </view>
+  </bar>
+  <view class="bg-white">
+    <view class="flex solid-bottom padding justify-start">
+      <view class='bg-grey padding-sm margin-xs radius'>start</view>
+      <view class='bg-grey padding-sm margin-xs radius'>start</view>
+    </view>
+    <view class="flex solid-bottom padding justify-end">
+      <view class='bg-grey padding-sm margin-xs radius'>end</view>
+      <view class='bg-grey padding-sm margin-xs radius'>end</view>
+    </view>
+    <view class="flex solid-bottom padding justify-center">
+      <view class='bg-grey padding-sm margin-xs radius'>center</view>
+      <view class='bg-grey padding-sm margin-xs radius'>center</view>
+    </view>
+    <view class="flex solid-bottom padding justify-between">
+      <view class='bg-grey padding-sm margin-xs radius'>between</view>
+      <view class='bg-grey padding-sm margin-xs radius'>between</view>
+    </view>
+    <view class="flex solid-bottom padding justify-around">
+      <view class='bg-grey padding-sm margin-xs radius'>around</view>
+      <view class='bg-grey padding-sm margin-xs radius'>around</view>
+    </view>
+  </view>
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />垂直对齐(align)
+    </view>
+  </bar>
+  <view class="bg-white">
+    <view class="flex solid-bottom padding align-start">
+      <view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
+      <view class='bg-grey padding-sm margin-xs radius'>start</view>
+    </view>
+    <view class="flex solid-bottom padding align-end">
+      <view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
+      <view class='bg-grey padding-sm margin-xs radius'>end</view>
+    </view>
+    <view class="flex solid-bottom padding align-center">
+      <view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
+      <view class='bg-grey padding-sm margin-xs radius'>center</view>
+    </view>
+  </view>
+</block>
+<block wx:if="{{TabCur==1}}">
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />等分列
+    </view>
+    <view class='action'></view>
+  </bar>
+  <view class="bg-white padding">
+    <view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
+      <view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
+    </view>
+  </view>
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />等高
+    </view>
+    <view class='action'></view>
+  </bar>
+  <view class="bg-white padding">
+    <view class="grid col-4 grid-square">
+      <view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
+    </view>
+  </view>
+</block>
+<block wx:if="{{TabCur==2}}">
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />浮动
+    </view>
+  </bar>
+  <view class="bg-white padding">
+    <view class=" cf padding-sm">
+      <view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
+      <view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
+    </view>
+  </view>
+</block>
+<block wx:if="{{TabCur==3}}">
+  <bar class="margin-top solid-bottom">
+    <view class='action'>
+      <icon class='icon-title text-blue' />内外边距
+    </view>
+  </bar>
+  <view class="bg-white">
+    <view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">外边距</view>
+      <view class="basis-df padding-bottom-xs">内边距</view>
+      <view class="basis-df">.margin-{size}</view>
+      <view class="basis-df">.padding-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">水平方向外边距</view>
+      <view class="basis-df padding-bottom-xs">水平方向内边距</view>
+      <view class="basis-df">.margin-lr-{size}</view>
+      <view class="basis-df">.padding-lr-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">垂直方向外边距</view>
+      <view class="basis-df padding-bottom-xs">垂直方向内边距</view>
+      <view class="basis-df">.margin-tb-{size}</view>
+      <view class="basis-df">.padding-tb-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">上外边距</view>
+      <view class="basis-df padding-bottom-xs">上内边距</view>
+      <view class="basis-df">.margin-top-{size}</view>
+      <view class="basis-df">.padding-top-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">右外边距</view>
+      <view class="basis-df padding-bottom-xs">右内边距</view>
+      <view class="basis-df">.margin-right-{size}</view>
+      <view class="basis-df">.padding-right-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">下外边距</view>
+      <view class="basis-df padding-bottom-xs">下内边距</view>
+      <view class="basis-df">margin-bottom-{size}</view>
+      <view class="basis-df">.padding-bottom-{size}</view>
+    </view>
+    <view class='flex flex-wrap padding solid-top'>
+      <view class="basis-df padding-bottom-xs">左外边距</view>
+      <view class="basis-df padding-bottom-xs">左内边距</view>
+      <view class="basis-df">.margin-left-{size}</view>
+      <view class="basis-df">.padding-left-{size}</view>
+    </view>
+  </view>
+</block>

demo/pages/basics/layout/layout.wxss

@@ -0,0 +1,3 @@
+page{
+  padding-top: 45px;
+}