小程序注意事项

1.模态框

<!--pages/model/model.wxml-->
<view class='container' catchtap='click'>点击</view>
<view class='model' style='{{cc}}'>
 <view class="modal-button" style="width:100%">
    <view style="color:green;border-right:1px solid #E5E7ED;" bindtap="touchAddNew">确定</view>
    <view bindtap="touchCancel">取消</view>
  </view>

</view>

/* pages/model/model.wxss */
.container{
  padding: 20rpx;
  font-size: 30rpx;
  background: red;
  color: #fff;
}
.model{
   position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99999;
    opacity: 0;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;

}
.modal-button {
    height: 100rpx;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #fff;
}

.modal-button view {
    width: 50%;
    border-top: 1px solid #E5E7ED;
    display: flex;
    justify-content: center;
    align-items: center;
}

// pages/model/model.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   cc:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  click:function(e){
    var _this =this;
    console.log("点击事件成功");
    _this.setData({
      cc:'opacity:1;pointer-events:auto;'
    })
  },
  touchAddNew:function(){
    var _this = this;
    console.log(123)
    _this.setData({
      cc: ' '
    })
  },
  touchCancel:function(){
    var _this = this;
    console.log(456)
    _this.setData({
      cc: ''
    })
  }
})

2 swiper

/* pages/swiper/swiper.wxss */
.wx-swiper-dot-active{
  width: 30px !important;
  /* border-radius: 10px !important; */
  border-radius:0px !important;
}
.wx-swiper-dot-active{
  width: 30px !important;
  /* border-radius: 10px !important; */
  border-radius:0px !important;
}
.wx-swiper-dot{
   width: 30px !important;
  /* border-radius: 10px !important; */
  border-radius:0px !important;
}

3随机颜色

<view class='box'style=" background: linear-gradient({{rotate}}deg,#{{color1}},#{{color2}},#{{color3}})" ></view>
<button open-type="share">分享</button>
<view class='dianji' catchtap='click'></view>

mdc_changeColor:function(){
    var _this= this
    var colorArr=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
    var timer = setInterval(function () {
      var color1 = "";
      var color2 = "";
      var color3 = "";
      var rotate = "";

    for(var i=0;i<6;i++){
      color1 += colorArr[parseInt(Math.random(colorArr) * 16)]
      // console.log(color1);
    }
    for (var i = 0; i < 6; i++) {
      color2 += colorArr[parseInt(Math.random(colorArr) * 16)]
      // console.log(color2);
    }
    for (var i = 0; i < 6; i++) {
      color3 += colorArr[parseInt(Math.random(colorArr) * 16)]
    }
     _this.setData({
      color1: color1,
      color2: color2,
      color3: color3,
      rotate:parseInt(Math.random()*360)
    })
    }, 700)
  },