适配方案、可配置主题、纵向瀑布流、h5拍照、沉浸式导航栏

适配方案

可配置主题

1. 提供一个方法用于判断色系是暗色系还是亮色系

/**
 * 16进制颜色转rgb
 * @param {String} color 16进制颜色
 */
color2rgb(color) {
  let sColor = color.toLowerCase()
  // 十六进制颜色值的正则表达式
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  // 如果是16进制颜色
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = '#'
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    // 处理六位的颜色值
    let sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return 'RGB(' + sColorChange.join(',') + ')'
  }
  return sColor
},

/**
 * 判断颜色是暗色系还是亮色系
 * @param {String} color 16进制颜色
 */
colorStyle(color) {
  let rgb = this.color2rgb(color)
  let rgbSum = rgb
    .replace('RGB(', '')
    .replace(')', '')
    .split(',')
    .reduce((pre, cur) => pre + Number(cur), 0)
  return rgbSum / 3 > 128 ? 'white' : 'black'
},

1. 从接口获取主题数据，根据主题色系来控制字体，icon颜色
2. 优先获取本地主题数据
   > - 如果本地有数据，优先使用本地数据，并且发起请求同步远端数据
   > - 如果本地没有数据，则等待远端数据2s。等待成功则使用远端数据并且保存到本地；等待超时则使用默认数据

纵向瀑布流

纵向瀑布流的几个特点：

1. 每个 item 的宽度一致，高度不一致
2. item id 的顺序是横着排，1 -> 2 换行 3 -> 4 ...

根据这个特点，可以用一个容器装载两列的方式去排列，用flex布局。

id 1347... 是第一列的数据，id 2468 是第二列的数据

h5拍照

沉浸式导航栏

/**
 * 沉浸式通知栏
 */
const onscrollBar = () => {
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  let flag = scrollTop / 60
  let opacity = flag > 1 ? 1 : flag.toFixed(1)
  let color = util.rgba2hex(`rgba(255, 255, 255, ${opacity})`)
  // title效果
  if (scrollTop >= 30 && !this.titleIsShow__) {
    jsBridge.setActionBarTitleColor(config.titleStyle.color, title)
    jsBridge.setActionBarBackIcon('', config.goBackIcon.color)
    this.titleIsShow__ = true
  }
  if (scrollTop < 30 && this.titleIsShow__) {
    jsBridge.setActionBarTitleColor('#00000000', '')
    jsBridge.setActionBarBackIcon('', config.goBackIcon.initColor)
    this.titleIsShow__ = false
  }
  // bg效果
  // 1. 触顶立即执行透明状态栏
  // 2. max立即执行白色状态栏
  // 3. 其他情况节流渐变
  if (scrollTop <= 0) {
    jsBridge.newChangeAppNavigationColor('#00ffffff')
  }
  if (scrollTop == 60) {
    jsBridge.newChangeAppNavigationColor('#ffffffff', true)
  }
  if (scrollTop > 0 && scrollTop < 60) {
    // 节流
    // 若两次间隔时间大于指定时间，则执行函数
    let now = +new Date()
    if (now - this.navigationBarPrevious__ > 50) {
      this.navigationColor__ = color
      jsBridge.newChangeAppNavigationColor(color)
      this.navigationBarPrevious__ = now
    }
  }
  // bug兼容
  if (scrollTop > 60 && this.navigationColor__ !== '#ffffffff') {
    this.navigationColor__ = color
    jsBridge.newChangeAppNavigationColor(color, true)
  }
}