小程序比较常用的特殊控件

前言：
对于一个Android程序来说，与其说学习微信开发不如说学习JS和CSS,其中JS一个用惯了AS的人来说有点不按套路出牌，而CSS则是非常头疼的在于大量样式需要记。

圆角按钮：
CSS

.addResume {
  float: right;
  background-color: #fff;
  position: fixed;
  bottom: 20rpx;
  right: 10px;
  width: 45px;
  height: 45px;
  background: #00bcdc;
  border: 0 solid #fff;
  border-radius: 500px;
  box-shadow: 2px 2px 2px #ccc;
}

.addResume text {
  color: white;
  display: block;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
}

其中要提的是wxml中没有帧布局,并列摆放就是了

<view class="addResume" bindtap="chooseDateClick">
  <text>Add</text>
</view>

自定义弹窗

css

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
}

.modalDlg {
  width: 580rpx;
  height: 620rpx;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  margin: -370rpx 85rpx;
  background-color: #fff;
  border-radius: 26rpx;
  display: flex;
  align-items: center;
}

.qr {
  display: block;
  margin: 0 auto;
  width: 580rpx;
  height: 580rpx;
}

wxml

<view class="mask" bindtap="sheetclose" wx:if="{{showSheetModal}}"></view>
 <cover-view class="mask" bindtap="go" wx:if="{{showModal}}"></cover-view>
    <cover-view class="modalDlg" wx:if="{{showModal}}">
      <cover-image class='qr' mode='aspectFit' bindtap='openimg' data-url='{{imageUrl}}' src="{{imageUrl==null?'../../../imgs/much_qr.png':imageUrl}}" />
    </cover-view>

自定义ActionSheet
wxml

<view class="actionSheet" animation="{{sheetAnimation}}">
  <button class='sheetItem' type='default' open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开百度云盘</button>
  <view class='line'></view>
  <button class='sheetItem' bindtap='copyUrl' type='default'>复制链接</button>
  <view class='line'></view>
  <button class='sheetItem' bindtap='sheetclose' type='default'>取消</button>
</view>

css


.sheetItem {
  width: 100%;
  margin: 0px;
  height: 33.3%;
  border-radius: 0;
}

.line {
  background: #e3e3e5;
  width: 100%;
  height: 1px;
}

.sheetItem::after {
  border: none;
}

.actionSheet {
  width: 100%;
  height: 30%;
  top: 100%;
  position: fixed;
  margin: 0 auto;
  z-index: 9999;
  bottom: 0px;
  border-style: none;
  background-color: #fff;
  flex-direction: column;
  display: flex;
}

 /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    // 页面渲染完成
    //实例化一个动画
    this.animation = wx.createAnimation({
      // 动画持续时间，单位ms，默认值 400
      duration: 500,
      /**
       * http://cubic-bezier.com/#0,0,.58,1  
       *  linear  动画一直较为均匀
       *  ease    从匀速到加速在到匀速
       *  ease-in 缓慢到匀速
       *  ease-in-out 从缓慢到匀速再到缓慢
       * 
       *  http://www.tuicool.com/articles/neqMVr
       *  step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
       *  step-end   保持 0% 的样式直到动画持续时间结束        一闪而过
       */
      timingFunction: 'linear',
      // 延迟多长时间开始
      delay: 100,
      /**
       * 以什么为基点做动画  效果自己演示
       * left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
       * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
       */
      transformOrigin: 'left top 0',
      success: function(res) {
        console.log(res)
      }
    })
  },
  clickBtnOpen: function(e) {
    var that = this
    var copyLink = e.target.dataset.url
    try {
      // utils.copyToClipBoard(e.target.dataset.url)
      if (!that.data.showSheetModal)
        that.animation.translate(0, -wx.getSystemInfoSync().windowHeight * 0.3).step({
          ducation: 500
        })
      else
        that.animation.translate(0, wx.getSystemInfoSync().windowHeight * 0.3).step({
          ducation: 500
        })
      that.setData({
        copyLink: copyLink,
        showSheetModal: !that.data.showSheetModal,
        sheetAnimation: that.animation.export()
      })

    } catch (err) {
      console.log(err)
    }
  },
  sheetclose: function(e) {
    var that = this
    that.animation.translate(0, wx.getSystemInfoSync().windowHeight * 0.3).step({
      ducation: 500
    })
    that.setData({
      showSheetModal: !that.data.showSheetModal,
      sheetAnimation: that.animation.export()
    })
  },
  
  //复制操作
  copyUrl: function(e) {
    this.sheetclose()
    utils.copyToClipBoard(this.data.copyLink)
  },
   launchAppError: function(e) {
    console.log(e.detail.errMsg)
    this.sheetclose()
    wx.showToast({
      title: '暂不支持，敬请期待',
      icon: 'none',
      duration: 500,
    })
  },

小程序比较常用的特殊控件

猜你喜欢