react页面布局

最新推荐文章于 2024-02-04 17:22:59 发布

yjwnm

最新推荐文章于 2024-02-04 17:22:59 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/yjwnm/article/details/102872547

版权

;(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://

yjwnm

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react页面布局

目录页面适配方案1px兼容单纯一个方向的边框四个方向的边框重置样式引入组件库引入走马灯引入Tab标签页引入步进器补充svgcdn引入页面适配方案淘宝;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentEl...
复制链接

扫一扫