react页面布局

目录

• 页面适配方案
• 1px兼容
  • 单纯一个方向的边框
  • 四个方向的边框
• 重置样式
• 引入组件库
  • 引入走马灯
  • 引入Tab标签页
  • 引入步进器
• 补充
  • svg
  • cdn引入

页面适配方案

• 淘宝

;(function(designWidth, maxWidth) {
  var doc = document,
  win = window,
  docEl = doc.documentElement,
  remStyle = document.createElement("style"),
  tid;

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    maxWidth = maxWidth || 540;
    width>maxWidth && (width=maxWidth);
    var rem = width * 100 / designWidth;
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  }

  if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle);
  } else {
    var wrap = doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap = null;
  }
  //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();

  win.addEventListener("resize", function() {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);

  win.addEventListener("pageshow", function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);

  if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
  } else {
    doc.addEventListener("DOMContentLoaded", function(e) {
      doc.body.style.fontSize = "16px";
    }, false);
  }
})(375, 750); 

• 网易

function font () {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
  /* 750/dpi/100 */
  /* dip = 物理像素【 750 】/逻辑像素 【 375 】 */
}


font()


window.onresize = font

• 阿里

(function(doc, win) {
  const docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      const clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      let max = 24;
      let min = 9.3125;
      let size = 20 * (clientWidth / 320);

      size = Math.min(size, max);
      size = Math.max(size, min);
      docEl.style.fontSize = size + 'px';
      console.log(docEl.style.fontSize, 'em= =====')
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

scss的使用

• 安装

yarn add sass-loader node-sass -D

• 定义全局样式【global】

$commonColor:#e54847;

• 两个scss文件之间的引入

/* 两个scss文件之间的引入---@import,且路径开头不一定要引入~ */
@import '../../assets/global/index.scss';

• 头部Tab scss样式

header{
    width:100%;
    height:0.505rem;
    background:$commonColor;
}

1px兼容

• 兼容scss
  • 单纯需要一个方向的边框
    • 代码

    @mixin border($color,$pos) {
        & {
          position: relative;
          &:before {
            content: "";
            position: absolute;
            @if $pos==top { left:0; };
            @if $pos==left { left:0; };
            @if $pos==right { left:0; };
            @if $pos==bottom { left:0; };
            border-#{$pos}: 1px solid $color!important;
            transform-origin: 0 0;
            // padding: 1px;
            box-sizing: border-box;
            pointer-events: none;
          }
          &:last-child:before {
            border-top:none;
          }
        }
        @media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
          &:before {
            width: 100%;
            height: 100%;
            transform: scale(1);
          }
        }
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
          &:before {
            width: 200%;
            height: 200%;
            transform: scale(0.5);
          }
        }
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
          &:before {
            width: 300%;
            height: 300%;
            transform: scale(0.333);
          }
        }
    }
    

    • 使用

    //1.先引入
    @import '../../assets/global/border.scss';
    //2.在需要的地方调用，传参不用加引号
    //@include border( 颜色，边框方向 );
    @include border( #ccc,top )
    

  • 需要四个方向的边框
    • 代码

    @mixin borderAll( $color ) {
      &{
        position: relative;
        &:before {
          content: "";
          position: absolute;
          border-top: 1px solid $color!important;
          border-left: 1px solid $color!important;
          border-right: 1px solid $color!important;
          border-bottom: 1px solid $color!important;
          transform-origin: 0 0;
          left : 0;
          top : 0;
          box-sizing:padding-box;
          pointer-events: none;
        }
        &:last-child:before {
          border-top:none;
        }
      }
      @media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
        &:before {
          width: 100%;
          height: 100%;
          transform: scale(1);
        }
      }
      @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
        &:before {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
        }
      }
      @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
        &:before {
          width: 300%;
          height: 300%;
          transform: scale(0.333);
        }
      }
    }
    

    • 实现

    //1.先引入
    @import '../../assets/global/border.scss';
    //2.在需要的地方调用，传参不用加引号
    //@include borderAll( 颜色 );
    @include borderAll( #ccc )
    

重置样式

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html,body,#root,.App {
	height: 100%;
	touch-action: none
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	color: #333333;
	text-decoration: none;
}
i,b{
	font-style:normal;
}

引入组件库

• 引入走马灯
  • 问题

  //报错信息
  [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
  

  • 解决
    • 在index.css入口文件中加入下面的样式

    *{
      touch-action: none;
    }
    

  • 如果不要两边的空隙，则只需要删除下面这个组件

  <WingBlank>
  

• 引入Tab标签页
  • 问题【渲染】

  //这里必须要有title属性【这里的title属性就是显示在tab栏的每一项内容】，可是请求到的数据里面没有title属性
  const tabs = [
    { title: '1st Tab' },
    { title: '2nd Tab' },
    { title: '3rd Tab' },
    { title: '4th Tab' },
    { title: '5th Tab' },
    { title: '6th Tab' },
    { title: '7th Tab' },
    { title: '8th Tab' },
    { title: '9th Tab' },
  ];
  

  • 解决：
    • 将categoryItem赋值给tabs,将里面的name属性赋值给title属性

      const tabs = this.props.categoryItem.slice( 0 )
        tabs && tabs.map(item => {
            item.title = item.name
        })
        console.log( 'tabs',tabs )
    

  • 使用代码

  import React from 'react'
  import { Tabs } from 'antd-mobile';
  
  export default class CategoryList extends React.Component {
    //list数据列表
    renderList = list => (
        list.map(item => {
            return (
              <li key = { item.api_cid }>
                  <a>
                      <img src={ item.img } alt=""/>
                      <span> { item.name } </span>
                  </a>
              </li>
            )      
        })
      )
    //floors数据渲染
    renderFloor = tab => {
        return (
          tab.floors.map((item,index) => (
              <div className = "tab_title" key = { index }>
                  <h3> { item.name } </h3>
                  <ul>
                      { this.renderList( item.list ) }
                  </ul>
              </div>
          ))
        )
    }
    //右边的聂内容渲染
    renderContent = tab =>{
        console.log( 'tab',tab )
        return (
          <div style={{ height: '100%', backgroundColor: '#fff',padding:'.1rem' }}>
              { this.renderFloor( tab ) }
          </div>
        )
    }
  
    render() {
      // const tabs = [
      //   { title: '1st Tab' },
      //   { title: '2nd Tab' },
      //   { title: '3rd Tab' },
      //   { title: '4th Tab' },
      //   { title: '5th Tab' },
      //   { title: '6th Tab' },
      //   { title: '7th Tab' },
      //   { title: '8th Tab' },
      //   { title: '9th Tab' },
      // ];
  
      //解决Tab必须有title属性的问题
      /* 将categoryItem赋值给tabs,将里面的name属性赋值给title属性 */
      const tabs = this.props.categoryItem.slice( 0 )
      tabs && tabs.map(item => {
          item.title = item.name
      })
  
      return (
          <Tabs 
          tabBarPosition = 'left'
          tabDirection = 'vertical'
          tabs={tabs} 
          renderTabBar={props => <Tabs.DefaultTabBar {...props} page={13} />}>
            {this.renderContent}
          </Tabs>
      );
    }
  }
  

• 引入步进器

//1.引入
<Stepper
  style={{ width: '100%', minWidth: '100px' }}
  showNumber
  max={10}
  min={1}
  value={this.state.val}
  onChange={this.onChange}
/>
/*
    1.这里的val要自己定义
    import React,{ useState} from 'react'
    let [ detailsVal,setDetailVal ] = useState( 1 )
    val = detailsVal
    2.这里的onChange事件要自己定义
    function changeVal ( detailsVal ) {
        setDetailVal ( detailsVal )
    }
    onChange事件-->changeVal事件
*/

补充

• svg
  • 好处：减少ajax请求
  • 缺点：代码多，造成html污染
• font awesome cdn引入
  • 需要加http://