微信小程序,富文本,屏幕方向,滑动事件

微信富文本

<rich-text nodes="{{data}}"></rich-text>

解决富文本图片溢出

//在数据后面添加
data.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')

iOS富文本图片不显示(百度说是iOS不支持webp)

// 正则
    var reg = /&tp=webp/g; //把webp截掉 图片可以正常显示
    //截取字符串
    var str = _this.data.matchDetail.replace(reg, "");
    _this.setData({
      matchDetail: str
    })

屏幕方向

//在json文件中配置(app.json或者当前页面.json)
"pageOrientation": "auto" //跟随系统旋转 
"pageOrientation": "landscape" //强制横屏

滑动事件

//三个属性都要加
<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'></view>

 data: {
    touchS : [0,0],
    touchE : [0,0]
  },
  touchStart: function(e){
    let sx = e.touches[0].pageX
    let sy = e.touches[0].pageY
    this.data.touchS = [sx,sy]
  },
  touchMove: function(e){
    let sx = e.touches[0].pageX;
    let sy = e.touches[0].pageY;
    this.data.touchE = [sx, sy]
  },
  touchEnd: function(e){
    let start = this.data.touchS
    let end = this.data.touchE
    console.log(start)
    console.log(end)
    if(start[0] < end[0] - 50){
      console.log('右滑')
    }else if(start[0] > end[0] + 50){
      console.log('左滑')
    }else if(start[1]<300){
      console.log('上滑')
    }else if(start[1]>300){
      console.log('下滑')
    }else{
      console.log('静止')
    }
  },
发布了9 篇原创文章 · 获赞 10 · 访问量 123

猜你喜欢

转载自blog.csdn.net/weixin_45936690/article/details/103390521