首页

pages/index/index.js

@@ -24,7 +24,18 @@ Page({
           url: '',
           text: '中国科学家实现“量子计算优越性”里程碑'
         }
-    ]
+    ],
+    act:0
+  },
+  tab:function(e){
+    this.setData({
+      act: e.target.dataset.id
+    })
+  },
+  swchange:function(e){
+    this.setData({
+      act: e.detail.current
+    })
   },
   onReady: function () {
     this.get_height();
@@ -77,32 +88,7 @@ Page({
     })
   },
   onLoad: function () {
-    if (app.globalData.userInfo) {
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
-      })
-    } else if (this.data.canIUse){
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
-      })
-    }
+ 
   },
   getUserInfo: function(e) {
     console.log(e)

pages/index/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "disableScroll": true
 }

pages/index/index.wxml

@@ -1,9 +1,9 @@
-<view class="search">
-    <input placeholder="输入名称/关键字搜索"></input>
+<view class="search" wx:if="{{act!=3}}">
+    <input placeholder-style='color:#C8C8C8;' placeholder="输入名称/关键字搜索"></input>
     <image  mode="widthFix" src="../images/search.png"></image>
 </view>
 
-<swiper indicator-dots="{{true}}" autoplay="" indicator-active-color='#ffffff'>
+<swiper class="banner" indicator-dots="{{true}}" autoplay="" indicator-active-color='#ffffff'>
         <block wx:for="{{lb}}" wx:key="*this">
           <swiper-item>
             <image  src="../images/233.jpg"></image>
@@ -11,12 +11,15 @@
           </swiper-item>
         </block>
 </swiper>
-
+<view class="search" wx:if="{{act==3}}"  style="margin-bottom:20rpx;">
+    <input placeholder-style='color:#C8C8C8;' placeholder="输入名称/关键字搜索"></input>
+    <image  mode="widthFix" src="../images/search.png"></image>
+</view>
 <view class="tab">
-    <text class="active">中科院全刊</text>
-    <text>主办单位</text>
-    <text>领域期刊</text>
-    <text>传播指数</text>
+    <text bindtap="tab" data-id='0' class="{{act == 0?'active':''}}">中科院全刊</text>
+    <text bindtap="tab" data-id='1' class="{{act == 1?'active':''}}">主办单位</text>
+    <text bindtap="tab" data-id='2' class="{{act == 2?'active':''}}">领域期刊</text>
+    <text bindtap="tab" data-id='3' class="{{act == 3?'active':''}}">传播指数</text>
 </view>
 
 <!-- <view class="zm">
@@ -47,129 +50,251 @@
           <view data-id='y' bindtap="scroll">Y</view>
           <view data-id='z' bindtap="scroll">Z</view>                            
 </view> -->
-<view id='nav' class="nav {{touchmove == 1?'touchmove':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
+<view  wx:if='{{act==0}}' id='nav' class="nav {{touchmove == 1?'touchmove':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
   <view id="nav_item" wx:for="{{zimu_list}}" wx:key="" data-index="{{index}}" 
         data-id='{{item}}'      bindtap="scroll">
     {{zimu_list[index]}}
   </view>
 </view>
-<scroll-view scroll-y="true" scroll-into-view="{{scroll}}" class="content">
-    
-    <view id="a" class="tt">A</view>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <view id="b" class="tt">B</view>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <view id="c" class="tt">C</view>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <view id="d" class="tt">D</view>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <view id="e" class="tt">E</view>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-    <navigator class="list">
-        <image  mode="widthFix" src="../images/qk1.jpeg"></image>
-        <view>
-            <view class="title">Acta Mathematicae Applicata...</view>
-            <text>微信号：暂无</text>
-            <text>主编：丁夏畦</text>
-            <text>主办单位：中国科学院数学与系统科学...</text>
-        </view>
-    </navigator>
-</scroll-view>
-
 
+<swiper circular="{{true}}" style="height:60vh;" bindchange='swchange' current='{{act}}' autoplay="{{false}}">
+  <swiper-item>
+    <scroll-view scroll-y="true" scroll-into-view="{{scroll}}" class="content">
+        
+        <view id="a" class="tt">A</view>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text class="">主办单位：中国科学院数学与系统科学中国科学院数学与系统科学</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text class="">主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <view id="b" class="tt">B</view>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <view id="c" class="tt">C</view>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <view id="d" class="tt">D</view>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <view id="e" class="tt">E</view>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+        <navigator class="list">
+            <image  mode="widthFix" src="../images/qk1.jpeg"></image>
+            <view>
+                <view class="title">Acta Mathematicae Applicata...</view>
+                <text>微信号：暂无</text>
+                <text>主编：丁夏畦</text>
+                <text>主办单位：中国科学院数学与系统科学...</text>
+            </view>
+        </navigator>
+    </scroll-view>
+  </swiper-item>
+  <swiper-item>
+      <scroll-view  scroll-y="true">
+          <view class="dw">
+              <view class="dw_title">数学与系统科学研究所   
+              <image mode="widthFix"  src="../images/left.png"></image><text>12 </text> </view>
+              <view class="dw_list">
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <view class="top cancel">取消置顶</view>
+              </view>
+          </view>
+          <view class="dw">
+              <view class="dw_title">数学与系统科学研究所   
+              <image mode="widthFix"  src="../images/left.png"></image><text>12 </text> </view>
+              <view class="dw_list">
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <view class="top">置顶</view>
+              </view>
+          </view>
+      </scroll-view>
+  </swiper-item>
+  <swiper-item>
+      <scroll-view scroll-y="true">
+          <view class="dw">
+              <view class="dw_title">数学与系统科学研究所   
+              <image mode="widthFix"  src="../images/left.png"></image><text>12 </text> </view>
+              <view class="dw_list">
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <view class="top cancel">取消置顶</view>
+              </view>
+          </view>
+          <view class="dw">
+              <view class="dw_title">数学与系统科学研究所   
+              <image mode="widthFix"  src="../images/left.png"></image><text>12 </text> </view>
+              <view class="dw_list">
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <navigator>
+                        <view>《数学学报》</view>
+                        <text>华罗庚“典型域上的多元复变数函数论”</text>
+                    </navigator>
+                    <view class="top">置顶</view>
+              </view>
+          </view>
+      </scroll-view>
+  </swiper-item>
+  <swiper-item>
+    <scroll-view  scroll-y="true">
+      <view class="thead">
+        <text>最近查询</text><text>最新指数</text><text>日环比</text>
+      </view>
+      <view class="tbody">
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+      </view>
+      <view class="tbody">
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+          <view class="tr">
+            <text>力学学报</text><text>234</text>
+            <text class="per">18.00% <text class="up"></text></text>
+          </view>
+      </view>
+    </scroll-view>
+  </swiper-item>
+</swiper>
 <!-- 当前选择字母提示框 -->
 <view class="hint_bok" hidden="{{hiddenn}}">{{nav_text}}</view>

pages/index/index.wxss

@@ -1,7 +1,7 @@
 /**index.wxss**/
 page{
-  background: #F1F1F1;
-  padding: 30rpx 30rpx 0;
+  background: #EEEEEE;
+  padding: 20rpx 30rpx 0;
   height: 100%;
   position: fixed;
   top: 0;
@@ -15,42 +15,39 @@ input{
   display: block;
   height: 70rpx;
   background: #fff;
-  border-radius: 10rpx;
+  border-radius: 20rpx;
   width: 100%;
-  padding: 0 16rpx;
-}
-input::placeholder{
-  color: #CCCCCC;
+  padding: 0 25rpx;
 }
 .search image{
   width: 35rpx;
   position: absolute;
-  right: 16rpx;
+  right: 25rpx;
   top: 0;
   bottom: 0;
   margin: auto;
 }
-swiper{
+.banner{
   margin: 20rpx 0;
   width: 100%;
   box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.08);
   height: 240rpx;
 }
-swiper-item{
+.banner swiper-item{
   border-radius: 20rpx;
   /* border: 1px solid red; */
   overflow: hidden;
   
 }
-swiper-item image{
+.banner swiper-item image{
   width: 100%;
   height: 100%;
 }
-.wx-swiper-dots{position:relative;left: unset!important;right: 0;}
+.banner .wx-swiper-dots{position:relative;left: unset!important;right: 0;}
 .wx-swiper-dots.wx-swiper-dots-horizontal{
   /* margin-bottom: rpx; */
 }
-.swiper-item{
+.banner .swiper-item{
   position: absolute;
   z-index: 9;
   bottom: 15rpx;
@@ -64,25 +61,26 @@ swiper-item image{
 .tab{
   display: flex;
   justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+.tab text{
+  font-size: 32rpx;
+  color: #666;
 }
-
 .tab .active{
   color: #3780CD;
 }
-
+scroll-view{
+  height: 100%;
+}
 .content{
   background: #fff;
   border-radius: 20rpx;
-  padding: 20rpx 25rpx;
-  margin: 20rpx 0 0;
+  /* padding: 20rpx 0rpx; */
   position: relative;
-  height: 60vh;
-  overflow: auto;
 }
 .zm{
   position: fixed;
-  
-  
   right: 12rpx;
   top: 480rpx;
   bottom:40rpx;
@@ -101,24 +99,30 @@ swiper-item image{
   /* width: 60rpx; */
 }
 .tt{
-  margin-bottom: 20rpx;
+  margin:  20rpx;
+  font-size: 24rpx;
+  color: #999999;
 }
 .list{
-  box-shadow: 0px 2rpx 9rpx 0px rgba(0, 0, 0, 0.08);
+  /* box-shadow: 0px 2rpx 9rpx 0px rgba(0, 0, 0, 0.2); */
   border-radius: 20rpx;
   display: flex;
   padding: 20rpx;
-  margin-bottom: 30rpx;
+  box-shadow: 0 0 15rpx 0px rgba(0, 0, 0, 0.2);
+  margin: 0 20rpx 40rpx;
+  
 }
 .list image{
   width: 20%;
+  /* height: 100% !important; */
 }
 .list>view{
   width: 80%;
   padding-left: 20rpx;
+  vertical-align: middle;
 }
 .list .title{
-  margin-bottom: 30rpx;
+  margin-bottom: 20rpx;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -129,6 +133,13 @@ swiper-item image{
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  font-size: 26rpx;
+}
+.list .company{
+  overflow: visible;
+  white-space: pre-wrap;
+  margin-top: 40rpx;
+  font-size: 28rpx;
 }
 @media(max-height:667px){
   .zm{
@@ -151,17 +162,105 @@ swiper-item image{
 }
 .nav{
   position: fixed;
-  top: 425rpx;
-  right: 0;
+  top: 430rpx;
+  right: 0rpx;
   width:30rpx;
-  z-index:1;
+  z-index:99;
 }
 .nav.touchmove{
   background:#ddd;
 }
 .nav view{
   font-size: 20rpx;
-  color: #666;
+  color: #4A80C7;
   text-align: center;
   line-height: 26rpx;
+}
+
+.dw{
+  border-radius: 20rpx;
+  overflow: hidden;
+  margin-bottom: 60rpx;
+}
+.dw_title{
+  background: #D9E5F1;
+  padding: 20rpx 30rpx;
+  font-size: 32rpx;
+  color: #666;
+}
+.dw_title text{
+  float: right;
+  font-size: 30rpx;
+}
+.dw_list{
+  background: #fff;
+  padding: 0 30rpx;
+}
+.dw_list navigator{
+  padding: 20rpx 0;
+  border-bottom: 1px solid #E4E4E4;
+}
+.dw_list navigator view{
+  font-size: 32rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+}
+.dw_list text{
+  font-size: 26rpx;
+  color: #999;
+}
+.top{
+  color: #666;
+  font-size: 30rpx;
+  text-align: right;
+  padding: 20rpx 0;
+}
+.cancel{
+  color: #1682DA;
+}
+.dw_title image{
+  width: 20rpx;
+  float: right;
+  position: relative;
+  top: 12rpx;
+}
+
+.thead{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+.thead text{
+  font-size: 30rpx;
+  color: #999;
+}
+.tbody{
+  background: #fff;
+  border-radius: 14rpx;
+  padding: 20rpx 20rpx 1rpx;
+  margin-bottom: 20rpx;
+}
+.tr{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+.tr text{
+  font-size: 32rpx;
+  color: #666;
+}
+.tr .per{
+  color: #DF4E2E;
+  font-size: 30rpx;
+  position: relative;
+  padding-right: 25rpx;
+}
+.up{
+    width: 0;
+    height: 0;
+    border: 10rpx solid transparent;
+    border-bottom: 16rpx solid #DF4E2E;
+    position: absolute;
+    right: 0;
+    top: 2rpx;
 }