xiaogang

ColorUI 源代码

pages/bar/bar.js

@@ -0,0 +1,22 @@
+// pages/element/bar/bar.js
+Page({
+  data: {
+    nav: [
+      { title: '标题 + 图标', name: 'normIcon' },
+      { title: '浮动在顶部', name: 'topfix' },
+      { title: '颜色', name: 'background' },
+      { title: '居中的标题', name: 'center' },
+      { title: '搜索 + 按钮', name: 'serach' },
+      { title: '头像 + 搜索（跳转）+ 城市', name: 'serachRound' },
+      { title: '浮动在底部', name: 'bottomfix' },
+      { title: '浮动在底部的方形按钮组', name: 'bottomfixBtns' },
+      { title: '浮动在底部的输入框', name: 'bottomfixInput' }
+    ],
+    barName: 'normIcon'
+  },
+  setName: function (e) {
+    this.setData({
+      barName: e.currentTarget.dataset.name
+    })
+  }
+})

pages/bar/bar.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "操作条/Bar"
+}

pages/bar/bar.wxml

@@ -0,0 +1,124 @@
+<view class="bar" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class=' iconfont icon-titles warning-text ml-sm'></text> 猜你喜欢
+  </view>
+</view>
+
+<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class=' iconfont icon-title success-text ml-sm'></text> 备注说明
+  </view>
+</view>
+
+<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back gray-text ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar gray" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar primary mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar secondary mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar success mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar warning mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar danger mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar justify-between" wx:if="{{barName=='center'}}">
+  <view class='text-df'>
+    <text class='iconfont icon-back ml-sm text-lg'></text> 返回
+  </view>
+  <view class='bar-text'>操作条/Bar </view>
+  <view class='text-df'>
+    <text class='iconfont icon-share mr-sm text-lg'></text>
+  </view>
+</view>
+
+<view class="bar" wx:if="{{barName=='serach'}}">
+  <view class='serach-form'>
+    <text class="iconfont icon-search"></text>
+    <input type="text" class="search-input sub" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  </view>
+  <button class='success btn sm mr-sm'>分类
+    <text class='iconfont icon-similar'></text>
+  </button>
+</view>
+
+<view class="bar success" wx:if="{{barName=='serachRound'}}">
+  <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='round mh-sm'></image>
+  <view class='serach-round'>
+    <text class="iconfont icon-search"></text>
+    <text>搜索图片、文章、视频</text>
+  </view>
+  <view class='mh-sm text-sm'>广州
+    <text class="iconfont icon-triangledownfill"></text>
+  </view>
+</view>
+
+<view class="bar topfix shadow" wx:if="{{barName=='topfix'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar bottomfix shadow justify-center" wx:if="{{barName=='bottomfix'}}">
+  <button class='btn success round basis-sm'>提交保存</button>
+</view>
+<view class="bar bottomfix shadow btns" wx:if="{{barName=='bottomfixBtns'}}">
+  <view class='flex-sub solid-right'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-service success-text text-lg'></view>
+      <text class='badge mark-badge cur'></text> 客服
+    </view>
+  </view>
+  <view class='flex-sub solid-right text-sm'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-shop warning-text text-lg'></view>
+      店铺
+    </view>
+  </view>
+  <view class='flex-sub text-sm'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-cart warning-text text-lg'></view>
+      <text class='badge mark-badge'>99</text> 购物车
+    </view>
+  </view>
+  <view class='danger flex-twice'>立即订购</view>
+</view>
+
+<view class="bar bottomfix shadow bar-textarea" wx:if="{{barName=='bottomfixInput'}}">
+  <input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
+  <button class='success btn mh-sm'>发送</button>
+</view>
+
+<view class="{{barName=='topfix'?'fixed-page':''}}">
+  <view class="nav-list {{barName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
+    <view class="nav-title">{{item.title}}</view>
+    <view class="iconfont icon-right"></view>
+  </view>
+</view>
+
+<image src='/images/skin.jpg' mode='widthFix' class="fixed-image mt-df" wx:if="{{barName=='topfix'||barName=='bottomfixBtns'||barName=='bottomfixInput'}}"></image>

pages/bar/bar.wxss

@@ -0,0 +1,10 @@
+page {
+  background: #f1f1f1;
+}
+.fixed-page{
+  margin-top: 120rpx;
+}
+.fixed-image{
+  width: 100%;
+  display:block;
+}