微信小程序实用小技巧

时间:2023-02-01 02:37:59

CSS:

实现渐变色

第一个是起点颜色,慢慢过渡到第二个颜色
从上到下的线性渐变:
background: linear-gradient(red, blue);
从左到右的线性渐变:
background: linear-gradient(to right, red , blue);

微信小程序实用小技巧
渐变色.png

裁圆角

设置弧度 顺序是 左上角  右上角  右下角  左下角 (顺时针)
border-radius: 3px 0px 0px 3px;

JS:

调用电话

//拨打手机
  calling:function(event){
    console.log('拨打手机')
  console.log(event)
  var that = this;
    wx.makePhoneCall({
      phoneNumber:that.data.phone, //此号码并非真实电话号码,仅用于测试
      success:function(){
        console.log("拨打电话成功!")
      },
      fail:function(){
        console.log("拨打电话失败!")
      }
    })
  },

下拉刷新,上拉加载更多

1)首先在要刷新类的.json文件里添加

{
   "enablePullDownRefresh": true
}

2)然后在js里实现"onPullDownRefresh"和"onReachBottom"方法即可

下拉事件
onPullDownRefresh: function() {
       console.log('刷新'); 
}, 
上拉事件
onReachBottom: function() { 
       console.log(' 下一页'); 
},

注意:刷新可能会和scroll-view控件冲突