react-horizontal-screen
v1.0.0
Published
horizontal web page layout and swipe events.
Downloads
12
Maintainers
Readme
react-horizontal-screen
=====================
no longer maintained!!
please use the horizontal-screen-web instead.
The author does not have enough energy to manage the two versions of vue and react separately
=====================
Desc
- Mobile web page landscape.listen swipe events
preview
demo1
demo2
Start
npm install react-horizontal-screen
import
import { HorizontalScreen, SwipeWrap } from "react-horizontal-screen";
HorizontalScreen props
| key | desc | default | required | | --------------- | ------------------------------------------------------------- | -------- | -------- | | width | Design draft width | -- | TRUE | | height | Design draft height | -- | TRUE | | rotate | Rotation angle. 90 and -90 choose one | 90 | FALSE | | cssVar | css variable name | --hs-var | FALSE | | times | Design draft multiple | -- | TRUE | | triggerTime | Time to trigger adaptation after window change | 1000 | FALSE | | adaptedCallback | adapted callback function,string or function,params:(el,bool) | -- | FALSE | | setWrapAttr | Set the width and height of the container | TRUE | FALSE |
SwipeWrap props
| key | desc | default | required | | ------------- | ----------------------------- | ------- | -------- | | swipeCallback | swipe event callBack function | -- | FALSE | | stop | event.stopPropagation | false | FALSE | | prevent | event.preventDefault | false | FALSE |
css var usage (Just recommended, you can replace it with other layout units)
@function px($num) {
@return calc((#{$num}/ 3 * var(--hs-var)) * 1px);
}
.main {
height: px(275 * 3);
background: green;
}
trigger screen adaptation
this.$refs["hscreen"].$hsLayout();
Usage demo (Design draft size (667 _ 3)_(375 * 3))
demo
import { HorizontalScreen, SwipeWrap } from "react-horizontal-screen";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
hsObj: {
width: 2001,
height: 1125,
cssvar: "hs-var",
times: 3,
rotate: 90,
},
domSwipeText: "",
domSwipeText2: "",
};
this.myRef = React.createRef();
}
swipeCallBack(data, el) {
let { type, dis } = data;
console.log("dom event", data, type, dis, el);
if (type === "swipeLeft" && dis >= 20) {
this.setState({ domSwipeText: "swipeLeft" });
console.log("swipeLeft");
} else if (type === "swipeRight" && dis >= 20) {
console.log("swipeRight");
this.setState({ domSwipeText: "swipeRight" });
}
}
swipeCallBack2(data, el) {
let { type, dis } = data;
console.log("dom event", data, type, dis, el);
if (type == "swipeBottom" && dis >= 5) {
console.log("swipeBottom");
this.setState({ domSwipeText2: "swipeBottom" });
} else if (type == "swipeTop" && dis >= 5) {
this.setState({ domSwipeText2: "swipeTop" });
}
}
swipeCallback(obj) {
if (obj.data.data.type) {
alert(obj.data.data.type);
} else {
clearTimeout(window.hsAdaptTimer);
window.hsAdaptTimer = setTimeout(() => {
alert("hsAdapt");
}, 1000);
}
}
adaptedCallback() {
clearTimeout(window.hsAdaptTimer);
window.hsAdaptTimer = setTimeout(() => {
alert("hsAdapt");
}, 1000);
}
changeRoate() {
let rotate = this.state.hsObj.rotate == 90 ? -90 : 90;
this.setState({
hsObj: {
width: 2001,
height: 1125,
cssvar: "hs-var",
times: 3,
rotate: rotate,
},
});
}
render() {
return (
<div className="App">
<HorizontalScreen
{...this.state.hsObj}
adaptedCallback={this.adaptedCallback}
className="box"
>
<div id="wrap">
<div className="header">
<div className="left">25</div>
<div className="mid">
<span onClick={() => this.changeRoate()}>
CLICK ME!current route {this.state.hsObj.rotate}
</span>
</div>
<div className="right">50</div>
</div>
<div className="main">
<SwipeWrap
swipeCallback={(data, el) => this.swipeCallBack(data, el)}
stop={true}
prevent={true}
className="dom-event"
>
<div className="dom-event">
<p>Horizontal sliding area.</p>
<h3>swipe type:{this.state.domSwipeText}</h3>
</div>
</SwipeWrap>
<SwipeWrap
swipeCallback={(data, el) => this.swipeCallBack2(data, el)}
stop={true}
prevent={true}
className="dom-event"
>
<div className="dom-event2">
<p>Vertical sliding area.</p>
<h3>swipe type:{this.state.domSwipeText2}</h3>
</div>
</SwipeWrap>
</div>
<div className="footer"></div>
</div>
</HorizontalScreen>
</div>
);
}
}
scss
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
@function px($num) {
@return calc((#{$num}/ 3 * var(--hs-var)) * 1px);
}
.box {
display: flex;
justify-content: center;
align-items: center;
background: red;
}
#wrap {
width: px(667 * 3);
height: px(375 * 3);
}
.header {
height: px(50 * 3);
background: blue;
display: flex;
color: red;
.left {
background: pink;
height: px(25 * 3);
width: px(300 * 3);
}
.mid {
background: yellow;
height: px(40 * 3);
width: px(300 * 3);
}
.right {
background: black;
height: px(50 * 3);
width: px(75 * 3);
}
}
.main {
height: px(275 * 3);
background: green;
}
.footer {
height: px(50 * 3);
background: blue;
}