Skip to content

T
token
Commit 300f267a authored by shajiaiming's avatar shajiaiming
Browse files
Options

fix

parent d67bab73
Hide whitespace changes
Inline Side-by-side
Showing with 9 additions and 237 deletions
api/controllers/test
View file @ 300f267a
......@@ -108,9 +108,9 @@
}
);
</script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/react.production.min.js"></script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/react-dom.production.min.js"></script>
<script src="https://athena-static.s3.cn-north-1.amazonaws.com.cn/js/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
......@@ -135,38 +135,8 @@
canRead: true,//是否显示APP内可读按钮 true 显示 false 不显示
recommendReason: '推荐理由：伊莱起初似乎并不习惯于说实话，可之后的说谎以及推卸责任给他带来了一系列的烦心事儿。这让伊莱认识到，实话实说其实挺好的。本书会告诉孩子：实话实说要比撒谎容易得多；本书也会告诉家长和老师：只要正确引导孩子，孩子就有能力自己解决这个问题。',//推荐理由
},
],
tabs: [
{
name: "书籍介绍",
id: 1
},
{
name: "教学目标",
id: 2
},
{
name: "策略解读",
id: 3
},
{
name: "话题讨论",
id: 1
},
{
name: "亲子互动",
id: 2
},
{
name: "推荐书目",
id: 3
}
],
current: 0,
]
};
this.addListener = this.addListener.bind(this);
this.removeListener = this.removeListener.bind(this);
this.move = this.move.bind(this);
}
checkDevice() {//判断设备系统
......@@ -269,158 +239,12 @@
componentDidMount() {
document.title = "家长指导手册";
this.addListener();
}
move() {
let cont0 = this.refs.cont0;
let cont1 = this.refs.cont1;
let cont2 = this.refs.cont2;
let cont3 = this.refs.cont3;
let cont4 = this.refs.cont4;
let cont5 = this.refs.cont5;
const tabH = 0.44 * documentElement.style.fontSize.split('px')[0];
//console.log(this.refs.guides.getBoundingClientRect().top);
//console.log(cont1.getBoundingClientRect().top);
if (this.refs.guides.getBoundingClientRect().top < -20) {
this.refs.topTab.style.display = "block";
} else {
this.refs.topTab.style.display = "none";
}
if (cont5.getBoundingClientRect().top <= tabH) {
this.setState({
current: 5
});
return false;
}
if (cont4.getBoundingClientRect().top <= tabH) {
this.refs.tab.scrollLeft = 100;
this.setState({
current: 4
});
return false;
}
if (cont3.getBoundingClientRect().top <= tabH) {
this.setState({
current: 3
});
return false;
}
if (cont2.getBoundingClientRect().top <= tabH) {
this.setState({
current: 2
});
return false;
}
if (cont1.getBoundingClientRect().top <= tabH) {
this.refs.tab.scrollLeft = 0;
this.setState({
current: 1
});
return false;
}
if (cont0.getBoundingClientRect().top <= tabH) {
this.setState({
current: 0
});
}
}
addListener() {
document.addEventListener("scroll", this.move);
}
removeListener() {
document.removeEventListener("scroll", this.move);
}
itemNav(index) {//菜单切换
this.removeListener();
let that = this;
this.setState({
current: index
}, () => {
if (index === 0) {
this.refs.cont0.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if (index === 1) {
this.refs.tab.scrollLeft = 0;
this.refs.cont1.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if (index === 2) {
this.refs.cont2.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if (index === 3) {
this.refs.cont3.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if (index === 4) {
this.refs.tab.scrollLeft = 100;
this.refs.cont4.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
if (index === 5) {
this.refs.cont5.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
//滚动完成后 重新监听
let temp = 1;
setTimeout(function judge() {
let temp1 = document.getElementsByTagName("html")[0].scrollTop;
console.log('temp ' + temp);
console.log('temp1 ' + temp1);
if (temp != temp1) { //两次滚动高度不等，则认为还没有滚动完毕
setTimeout(judge, 100);
temp = temp1; //滚动高度赋值
} else {
that.addListener();
temp = null; //放弃引用
}
}, 100);
});
}
render() {//主渲染函数
const {bookListItems, tabs, current} = this.state;
const {bookListItems} = this.state;
return (
<div class="guide" ref="guides">
<div class="topTab" ref="topTab">
<div className="historyTabs" ref="tab">
{tabs.map((item, index) => {
return (
<div
key={index}
className={`tab ${index === current ? "tab--select" : ""}`}
onClick={() => {
this.itemNav(index);
}}
ref={`conttab${index}`}
>
{item.name}
</div>
);
})}
</div>
</div>
<div class="guide">
<div class="course">
<div class="course_msg">
......@@ -429,7 +253,6 @@
</div>
</div>
{/* 书籍介绍 */}
<div class="intros" ref="cont0"></div>
<div class="intro">
<div class="title">书籍介绍</div>
<div class="intro_content">
......@@ -473,7 +296,6 @@
</div>
</div>
{/* 教学目标 */}
<div class="intros" ref="cont1"></div>
<div class="intro">
<div class="title">教学目标</div>
<div class="aims">
......@@ -485,7 +307,6 @@
</div>
</div>
{/* 策略解读 */}
<div class="intros" ref="cont2"></div>
<div class="intro">
<div class="title">策略解读</div>
<div class="strategy">
......@@ -508,7 +329,6 @@
</div>
</div>
{/* 话题讨论 */}
<div class="intros" ref="cont3"></div>
<div class="intro">
<div class="title">话题讨论</div>
<div class="dis">
......@@ -554,7 +374,6 @@
</div>
</div>
{/* 亲子互动 */}
<div class="intros" ref="cont4"></div>
<div class="intro">
<div class="title">亲子互动</div>
<div class="special_content">
......@@ -594,7 +413,6 @@
</div>
</div>
{/* 推荐书目 */}
<div class="intros" ref="cont5"></div>
<div class="intro">
<div class="title">推荐书目</div>
<div class="recommend">
......@@ -603,54 +421,12 @@
})}
</div>
</div>
<style jsx>{`
.guide {
background: #18CAFF;
padding-bottom: .64rem;
}
.topTab {
display: none;
}
.historyTabs {
position: fixed;
z-index: 3;
padding-left: 0.24rem;
height: 0.44rem;
background: #ffffff;
box-shadow: 0 0 0.1rem 0 rgba(65, 69, 100, 0.1);
color: #999999;
font-size: 0.15rem;
line-height: 0.435rem;
display: -webkit-box;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling:touch;
}
.historyTabs::-webkit-scrollbar{
display: none;
}
.historyTabs .tab {
position: relative;
margin-right: 0.15rem;
}
.historyTabs .tab:last-child{
padding-right: 0.24rem;
}
.historyTabs .tab--select {
color: #444444;
}
.historyTabs .tab--select:after {
position: absolute;
top: 0.12rem;
left: 0.28rem;
display: block;
width: 0.04rem;
height: 0.6rem;
border-radius: 0.02rem;
background-color: #ffd801;
content: "";
transform: rotate(-270deg);
}
.guide .course {
height: 2.26rem;
background: url(https://ydschool-online.nosdn.127.net/61068a9e-4f77-46a5-a9f7-4f81e3e21dd3.png) no-repeat;
......@@ -687,17 +463,13 @@
}
.intro {
width: 2.87rem;
padding: 0.4rem .2rem .3rem;
padding: .4rem .2rem .3rem;
margin: 0 auto;
background: #ffffff;
box-shadow: 0 0.02rem 0.08rem 0 rgba(65,69,100,0.08);
border-radius: 0.15rem;
margin-top: 0.25rem;
position: relative;
margin-top: .25rem;
}
.intros {
height: .22rem;
width: 2.87rem;
}
.intro .title {
width:1.01rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment