概述

[wx_UIModule]结合了微信的视觉规范，为用户提供更加统一的使用感受。

包含底部弹出视图(Dialog)、支付密码输入框(PassWordInput)、商品数量加减(Quantity)、提示消息(Toast)、顶部提示(Toptip)、角标(Badge)、星级评分(Rater)、图表(Charts)、富文本解析(RichText)、图片截取(Cropper)共计 10 类组件或元素。

下载

git clone https://github.com/ccmarios/wx_UIModule.git

注：本项目基础库版本为1.5.4，如运行失败，请尝试升级更新【微信开发者工具】。

声明

转载请注明原创地址：https://github.com/ccmarios/wx_UIModule.git

请尊重作者的劳动成果，尽管不写我也不能把你怎么样~

底部弹出视图

实现思路

在当前视图顶部利用z-index添加一层半透明的遮罩层，充当背景。在该背景上添加view，利用transition完成由底部向上滑出的效果。

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'Dialog.wxml'。模块部分代码如下所示，在需要加入该组件的wxml文件中引入Dialog.wxml，比如：<import src="你的路径/module/Dialog.wxml" />。代码中写入<template is="diaView" data="{{showDialog:showDialog}}" />，记得在.js文件中添加showDialog数据源以及.wxss添加模板所需样式。

 <template name="diaView">
  <view class="dialog {{ showDialog ? 'dialog_show' : '' }}">
    <view class="dialog_mask" bindtap="onClickdiaView" />
    <view class="dialog_container">

      <!--  //此区域自定义视图  -->
      <view class="flex_Center" style="height:500rpx;background:white;"> 
        <view style="color:#333;font-size:30rpx;">自定义视图</view>
      </view>

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

支付密码输入框

实现思路

六个密码输入框使用view+border展示，在view上层利用z-index添加一个透明色的input控件用于调起键盘输入，但是input在输入时会有光标闪烁。我的处理办法是，将控件left设置为-100rpx，这样光标出现在屏幕外，视觉上达到了效果。这不是最优的处理方式，有想法的朋友可以交流~

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'pwdInput.wxml'。引用方法同上，就不再赘述了，记得添加wxss

<template name="pwdInput">
  <view class="pwdInputStyle">
      <input class="pas_input" type="number" maxlength="6" focus="true" bindinput="onChangeInput" />
      <block wx:for="{{[0,1,2,3,4,5]}}">
        <view class="itemStyle flex_Center">
          <view wx:if="{{passWordArr[item] == true}}" class="PwdStyle"></view>
        </view>
      </block>
    </view>
</template>

商品数量加减

实现思路

首先要确定业务需求，右侧减号左侧加号中间是可以输入的框。需要注意的是，当商品数量减至1时，左侧减号不可点击。当商品数量增至最大值时，右侧加号不可点击。中间输入需要留意的是，可能会输入0或者大于商品数量上限时的处理。我的处理方式是：当输入0时，数量默认变为1；当输入数量大于上限时，变为最大值。详细见代码

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'numberPlusMinus.wxml'。注意加减号点击方法和input的处理。

<template name="quantity">
  <view class="quantityViewStyle">
    <view class="minusStyle" style="color:{{num==1?'#DADADA':white}}" bindtap="onTapMinus">-</view>
    <view class="inputViewStyle">
      <input class="inputView1Style" style="height:54rpx;" value="{{num}}" type="number" maxlength="2" bindinput="onInputNum" bindblur="lossFocus" />
    </view>
    <view class="plusStyle" style="color:{{num==totalNum?'#DADADA':white}}" bindtap="onTapPlus">+</view>
  </view>
</template>

提示消息

实现思路

这个就是普通的消息提示，没多少可说的。O(∩_∩)O哈哈~

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'messageView.wxml'。在.js中有个isShowToast的方法，传入文字即可。

<template name="UI-toast">
  <view class="UI-toast" wx:if="{{ toastShow }}">{{title}}</view>
</template>

顶部提示

实现思路

z-index + transition搞定~

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'topMessage.wxml'。

<template name="toptips">
  <view class="toptips {{ isTopTips ? 'toptips--show' : '' }}">{{ TopTipscontent }}</view>
</template>

角标

实现思路

利用css样式即可达到效果，详见代码

如何复用到你的项目

所有组件的复用模板都存放在'module'文件夹中，底部弹出视图的模板名为'badge.wxml'。

<template name="badge">
  <view class="demo__item">
    <view class="demo__icon badge">
        <view wx:if="{{number > 0}}" class="badge__count">{{number > 99 ? '99+' : number}}</view>
    </view>
</view>
</template>

星级评分

实现思路

五角星和心形图案在搜狗输入法找的😜，大小改变设置font-size，颜色改变设置color。我用了一个数组存评分数据，点击了第几个图案，数组存几个true，根据true/false展示不同的颜色。

如何复用到你的项目

好吧，这个没有模板！因为用了不同的数据源，懒得抽方法了😒 需要的同学，自己写一下吧~😳

参考项目

https://github.com/youzan/zanui-weapp、https://github.com/xiaolin3303/wx-charts、https://github.com/icindy/wxParse

结束语

如果你有更好的处理方案，欢迎交流~ 希望有更多的同学能加入进来，完善这套组件~ 最后，各位大佬觉得不错的，请Star哦~

ccmarios/wx_UIModule

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages