tui-fab.wxml 1.8 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <view catchtouchmove="stop">
  2. <view class="tui-fab-box {{!left || (left && right)?'tui-fab-right':''}}" style="left:{{parse.getLeft(left,right)}};right:{{parse.getRight(left,right)}};bottom:{{bottom}}rpx">
  3. <view class="tui-fab-btn {{isOpen?'tui-visible':''}} {{hidden?'tui-fab-hidden':''}}">
  4. <view class="tui-fab-item-box {{left && !right && item.imgUrl?'tui-fab-item-left':''}}" wx:for="{{btnList}}" wx:key="{{index}}" catchtap="handleClick" data-index="{{index}}">
  5. <view class="{{left && !right?'tui-text-left':'tui-text-right'}}" wx:if="{{item.imgUrl}}" style="font-size:{{item.fontSize}}rpx;color:{{item.color}}">{{item.text || ""}}</view>
  6. <view class="tui-fab-item" style="width:{{width}}rpx;height:{{height}}rpx;background :{{item.bgColor || bgColor}};border-radius:{{radius}}">
  7. <view class="tui-fab-title" wx:if="{{!item.imgUrl}}" style="font-size:{{item.fontSize}}rpx;color:{{item.color}}">{{item.text || ""}}</view>
  8. <image src="{{item.imgUrl}}" class="tui-fab-img" wx:else style="width:{{item.imgWidth}}rpx;height:{{item.imgHeight}}rpx"></image>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="tui-fab-item {{isOpen?'tui-active':''}}" style="width:{{width}}rpx;height:{{height}}rpx;border-radius:{{radius}};background:{{bgColor}};color:{{color}}" catchtap="handleClick" data-index="-1">
  13. <view class="tui-fab-icon tui-icon-plus"></view>
  14. </view>
  15. </view>
  16. <view class="tui-fab-mask {{isOpen? 'tui-visible': ''}} " bindtap="handleClickCancel"></view>
  17. </view>
  18. <wxs module="parse">
  19. module.exports = {
  20. getLeft: function(left,right) {
  21. var val = "auto "
  22. if (left && !right) {
  23. val =left + 'rpx'
  24. }
  25. return val
  26. },
  27. getRight:function(left,right){
  28. var val = right + 'rpx'
  29. if (left && !right) {
  30. val = "auto "
  31. }
  32. return val
  33. }
  34. }
  35. </wxs>