Bläddra i källkod

知识搜索高度优化2160

zhouna 5 år sedan
förälder
incheckning
824b77012f

+ 12 - 1
src/components/MedicalInfo/index.jsx

@@ -8,6 +8,7 @@ class MedicalInfo extends Component {
         super(props);
         this.$inp = React.createRef();
         this.$cont = React.createRef();
+      this.$ul = React.createRef();
         this.state={
           val:'',
           hasSearch: false,
@@ -21,6 +22,12 @@ class MedicalInfo extends Component {
     }
     getSearchList() {
         const { getAllConceptDetail,searchResult } = this.props;
+        const that = this;
+        if(searchResult&&searchResult.length>0){
+          setTimeout(function(){
+            that.$ul.current.style.height = getWindowInnerHeight()-270+'px';
+          },200);
+        }
         return searchResult && searchResult.map((item) => {
           return <li key={item.conceptId}
                      title='点击查看详情'
@@ -81,6 +88,10 @@ class MedicalInfo extends Component {
         const height = getWindowInnerHeight()-170;
         this.$cont.current.style.height = height+"px";
       }
+      if(this.$ul.current){
+        const height = getWindowInnerHeight()-270;
+        this.$ul.current.style.height = height+"px";
+      }
     });
   }
   componentWillReceiveProps(){
@@ -103,7 +114,7 @@ class MedicalInfo extends Component {
               </div>
               {searchResult&&searchResult.length>0?<div className={style['result']}>
                     <p className={style['title']}>查询内容</p>
-                    <ul>
+                    <ul ref={this.$ul}>
                       {this.getSearchList()}
                     </ul>
               </div>:<p className={style['no-data']}>{hasSearch?'搜索中...':msg}</p>}

+ 5 - 2
src/components/MedicalInfo/index.less

@@ -56,10 +56,13 @@
         border: none;
     }
     .result{
-        padding: 78px 5px 0 0;
+        margin-top:78px;
+        padding: 0 5px 0 0;
         height: 100%;
-        overflow: auto;
         box-sizing: border-box;
+        ul{
+            overflow: auto;
+        }
         li{
             border-bottom:1px #CECECE solid;
             line-height: 30px;

+ 12 - 1
src/components/ScaleSearch/index.jsx

@@ -8,6 +8,7 @@ class ScaleSearch extends Component {
     super(props);
     this.$inp = React.createRef();
     this.$cont = React.createRef();
+    this.$ul = React.createRef();
     this.state={
       val:'',
       hasSearch: false,
@@ -37,6 +38,12 @@ class ScaleSearch extends Component {
   }
   getSearchList() {
     const { searchResult } = this.props;
+    const that = this;console.log(getWindowInnerHeight()-270);
+    if(searchResult&&searchResult.length>0){
+      setTimeout(function(){
+        that.$ul.current.style.height = getWindowInnerHeight()-270+'px';
+      },200);
+    }
     return searchResult && searchResult.map((item) => {
       return <li key={item.conceptId}
                  title='点击查看详情'
@@ -96,6 +103,10 @@ class ScaleSearch extends Component {
         const height = getWindowInnerHeight()-170;
         this.$cont.current.style.height = height+"px";
       }
+      if(this.$ul.current){
+        const height = getWindowInnerHeight()-270;
+        this.$ul.current.style.height = height+"px";
+      }
     });
   }
   componentWillReceiveProps(){
@@ -118,7 +129,7 @@ class ScaleSearch extends Component {
           </div>
           {searchResult&&searchResult.length>0?<div className={style['result']}>
             <p className={style['title']}>查询内容</p>
-            <ul>
+            <ul ref={this.$ul}>
               {this.getSearchList()}
             </ul>
           </div>:<p className={style['no-data']}>{hasSearch?'搜索中...':msg}</p>}

+ 5 - 1
src/components/ScaleSearch/index.less

@@ -52,10 +52,14 @@
     border: none;
   }
   .result{
-    padding: 78px 5px 0 0;
+    margin-top:78px;
+    padding: 0 5px 0 0;
     height: 100%;
     overflow: auto;
     box-sizing: border-box;
+    ul{
+      overflow: auto;
+    }
     li{
       border-bottom:1px #CECECE solid;
       line-height: 42px;