你还在finclip中手写样式？！这个UI组件库你一定要知道

D1j1a
1,414 阅读4分钟

Finclip

FinClip 是与“微信小程序”、“百度小应用”等其他小程序开放平台具有类似属性的技术平台。FinClip 的核心是提供一个小程序容器技术。它由能渲染与执行小程序的客户端引擎、统一管理小程序上下架的中心、支撑小程序服务器端运行的云端设施、以及合规监管工具共同组成。

colorUI

ui组件库colorUI实现ui界面的设计，colorUI相比于同类小程序组件库，ColorUI更注重于视觉交互，样式更加华丽精美。

使用背景

可以快速生成精美的UI界面，增加用户体验。弥补前端人员的UI设计短板等。自适应于移动端界面，无需多次重复手动写样式。直接使用封装好的ui样式，加快开发效率。因为finclip支持兼容微信小程序的ui组件库 所以我们可以使用其中的colorUI组件库。

卡片式轮播图

在小程序中，轮播图大概是最常见的了。而我们通过组件库可以快速在finclip小程序生成轮播。

实现轮播图之前必须知道以下三点：

1.轮播图外层容器swiper

2.每一个轮播项swiper-item

3.swiper标签存在默认样式

  • width 100%

  • height 默认为 150px

  • swiper高度无法实现由内容撑开

image.png

可以根据需要设置属性autoplay，interval，circular，indicator-dots... 我这里只是列出了最常用的属性 详细看swiper finclip开发文档www.finclip.com/mop/documen…

属性作用默认值
autoplay自动轮播false
interval修改轮播时间5000
circular衔接轮播false
indicator-dots是否显示面板指示点false
indicator-color指示器的未选择的颜色rgba(0, 0, 0, .3)
indicator-active-color选中的时候的指示器的颜色#000000

swiper.fxml

<view class="cu-bar bg-white margin-top">
  <view class="action">
    <text class="cuIcon-title text-pink"></text> 卡片式轮播
  </view>
</view>
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
  <swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
    <view class="swiper-item">
      <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </view>
  </swiper-item>
</swiper>

swiper.js

Page({
  data: {
    cardCur: 0,
    swiperList: [{
      id: 0,//必不可少
      type: 'image',
      url: '图片地址'
    }, {
      id: 1,
        type: 'image',
        url: '',
    }, {
      id: 2,
      type: 'image',
      url: ''
    }, {
      id: 3,
      type: 'image',
      url: ''
    }, {
      id: 4,
      type: 'image',
      url: ''
    }, {
      id: 5,
      type: 'image',
      url: ''
    }, {
      id: 6,
      type: 'image',
      url: ''
    }],
  },
  cardSwiper(e) {
    this.setData({
      cardCur: e.detail.current
    })
  },
  })

模态框

模态对话框垄断了用户的输入。当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。模态对话框下，用户需要操作目标对话框就必须先操作模态对话框。

当我们需要在finclip小程序里制作一个意见反馈提交、关于我们的介绍等等的介绍的弹窗时，我们就可以用到模态框啦!

image.png

关于我们

image.png

my.fxml

<view class="cu-item arrow">
<button class="cu-btn content shadow" bindtap="showModal" data-target="DialogModal1">
        <text class="cuIcon-apps text-orange"></text>
        <text class="text-grey">关于我们</text></button>
    </view>
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
  <view class=" padding cu-dialog">
    <view class=" padding cu-bar bg-white justify-end">
      <view class="content">关于我们</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="padding-xl bg-white text-black">
    队名:神级程序员 重生 之 我在都市 炒河粉
      队员:d1j1a 10rin 李先生 蓝天下的一员 蕉
    </view>
    <view class="cu-bar bg-white justify-end">
      <view class="action">
        <button class="cu-btn line-blue text-blue d" bindtap="hideModal">取消</button>
        <button class="cu-btn bg-blue " bindtap="hideModal">确定</button>

      </view>
    </view>
  </view>
</view>

my.js

    hideModal(e) {
      this.setData({
        modalName: null
      })
    },
    showModal(e) {
      this.setData({
        modalName: e.currentTarget.dataset.target
      })
    }

卡片

在finclip小程序中，我们肯定想要实现一些文章展示列表的实例。像卡片一样滚动，增加页面美观性。 卡片式文章导航，使页面不会显得冗余。

1. 独立、聚焦

卡片设计因为会跟其他内容有天然的断层，所以会更容易形成独立的视觉焦点。

2. 轻便灵活

相比于从传统列表点击进内容详情页，卡片可以直接点击展开直接浏览详情，交互体验更轻，而且随时可以恢复卡片模式，十分灵活。

3. 自由组合

参考淘宝首页和appstore首页可以看出，不同形态的内容例如轮播广告、入口、推荐位、列表、文章通过承载于卡片之中，可以进行自由排版组合。没有了死板的排版规则，对于设计师甚至客户端工程师来说，都是十分的方便，少了各种各样的限制。

4. 多态操作

卡片是可操作性十分强的设计模式，可以纵向滑动，可以横向滚动，可以点击进行上下伸展，还可以长按拖动等等。

image.png

card.fxml

<view class="cu-card case {{isCard?'no-card':''}}">
  <view class="cu-item shadow">
    <view class="image">
      <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix"></image>
      <view class="cu-tag bg-blue">史诗</view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
      </view>
    </view>
    <view class="cu-list menu-avatar">
      <view class="cu-item">
        <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
        <view class="content flex-sub">
          <view class="text-grey">正义天使 凯尔</view>
          <view class="text-gray text-sm flex justify-between">
            十天前
            <view class="text-gray text-sm">
              <text class="cuIcon-attentionfill margin-lr-xs"></text> 10
              <text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
              <text class="cuIcon-messagefill margin-lr-xs"></text> 30
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

</view>

好啦，今天分享的finclip小程序与ui组件库的结合就到这里啦，下一期我们不见不散。 参考来源:finclip www.finclip.com/mop/documen…

colorUI github.com/weilanwl/Co…

avatar
文章
阅读
粉丝