随手记录前端开发中实用方法

1. flex盒子中存在margin的子元素如何换行排列
   如图:

父级元素样式属性:
.tags { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
column-gap 每个子元素的横向间距
row-gap 每个子元素的纵向间距

2. ios 系统中 app内嵌套的vebView video 自动全屏的解决方案

ios端设置allowsInlineMediaPlayback为true

web页面video标签设置 :webkit-playsinline="true" :playsinline="true" x-webkit-airplay="allow"

即可解决

3. 微信小程序中的webview如何监页面被显示 类似于小程序onshow

vue页面创建时监听hashchange, 这里需要注意visibilitychange在小程序中并不生效. 此处小程序需要在onshow周期赋予webview的src一个时间戳参数

小程序

// 这段代码会在小程序每次onShow的时候被执行
// 请注意query.t每次都会变化 以便vue中hashchange监听到
 wx.getLocation({
      type: 'gcj02',
      altitude: true, //高精度定位
      success: res => {
        this.setData({
          haveLocation: true
        })
        this.data.latitude = res.latitude
        this.data.longitude = res.longitude
        console.log(res)
        this.setData({
          url: `${api.MALL_ROOT}list/home?c_access_key=${wx.getStorageSync('user').accessKey}&c_user_id=${wx.getStorageSync('user').userId}&c_latitude=${res.latitude}&c_longitude=${res.longitude}&wx=1&t=${(new Date()).valueOf()}`
        })
      },
      fail: err => {
        this.setData({
          haveLocation: false,
          url: `${api.MALL_ROOT}list/home?c_access_key=${wx.getStorageSync('user').accessKey}&c_user_id=${wx.getStorageSync('user').userId}&c_latitude=${this.data.latitude}&c_longitude=${this.data.longitude}&wx=1&t=${(new Date()).valueOf()}`
        })
      }
    })

vue

 window.addEventListener(
      'hashchange',
      function (e) {
        // console.log(that.GetRequest(e.oldURL), that.GetRequest(e.newURL))
        that.isLoaction(that.GetRequest(e.newURL))
        // 这里代码是做了一个用户是否开启定位的处理 可忽略
        if (!that.GetRequest(e.oldURL).c_latitude && that.GetRequest(e.newURL).c_latitude) {
          that.query.lat = that.GetRequest(e.newURL).c_latitude
          that.query.lon = that.GetRequest(e.newURL).c_longitude
          that.$refs.list.reLoad()
        }
      },
      false
    )