update

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/logs/logs",
+    
     "pages/learning/index",
     "pages/learning/learning",
     "pages/knowledge/knowledge",

app.wxss

@@ -1,9 +1,6 @@
 /**app.wxss**/
-page,view,text,input{
+page,view,text,input,scroll-view{
   box-sizing: border-box;
   font-size: 28rpx;
   color: #333;
 }
-.nav{
-  
-}

pages/index/index.js

@@ -4,6 +4,13 @@ const app = getApp()
 
 Page({
   data: {
+    zimu_list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+    scroll: '', //滚动到指定 id值的子元素
+    touchmove: 0,//给字母导航添加背景色 1 添加 0不添加
+    nav_height: '',//字母导航单个元素高度
+    nav_top:'',
+    hiddenn: true,//hint_box 提示框 展示隐藏
+    nav_text: '',//hint_box 提示框里面的文本
     lb:[
         {
           url:'',
@@ -19,10 +26,54 @@ Page({
         }
     ]
   },
+  onReady: function () {
+    this.get_height();
+  },
   //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
+  touchstart: function (e) {
+    this.set_scroll(e)
+  },
+  touchmove: function (e) {
+    this.set_scroll(e)
+  },
+  touchend: function () {
+    this.setData({
+      touchmove: 0,
+      hiddenn: true
+    })
+  },
+  scroll(e){
+      var that = this
+      this.setData({
+        scroll:e.target.dataset.id.toLowerCase(),
+      })
+  },
+  set_scroll: function (e) {
+    var page_y = e.changedTouches[0].pageY - this.data.nav_top;
+    // console.log(page_y)
+    var nav_height = +this.data.nav_height
+    var idx = Math.floor(page_y / nav_height)
+    var zimu = this.data.zimu_list[idx];
+    this.setData({
+      touchmove: 1,
+      scroll: zimu.toLowerCase(),
+      nav_text: zimu,
+      hiddenn: false
+    })
+  },
+  get_height: function () {
+    var that = this
+    var query = wx.createSelectorQuery();
+    query.select('#nav_item').boundingClientRect()
+    wx.createSelectorQuery().select('#nav').boundingClientRect(function (rect) {
+      that.setData({
+        nav_top: rect.top,
+      })
+    }).exec()
+    query.exec(function (res) {
+      that.setData({
+        nav_height: res[0].height,
+      })
     })
   },
   onLoad: function () {

pages/index/index.wxml

@@ -19,36 +19,43 @@
     <text>传播指数</text>
 </view>
 
-<view class="content">
-<view class="zm">
-    <view>A</view>
-      <view>B</view>
-      <view>C</view>
-      <view>D</view>
-      <view>E</view>
-      <view>F</view>
-      <view>G</view>
-      <view>H</view>
-      <view>I</view>
-      <view>J</view>
-      <view>K</view>
-      <view>L</view>
-      <view>M</view>
-      <view>N</view>
-      <view>O</view>
-      <view>P</view>
-      <view>Q</view>
-      <view>R</view>
-      <view>S</view>
-      <view>T</view>
-      <view>U</view>
-      <view>V</view>
-      <view>W</view>
-      <view>X</view>
-      <view>Y</view>
-      <view>Z</view>                            
+<!-- <view class="zm">
+          <view data-id='a' bindtap="scroll">A</view>
+          <view data-id='b' bindtap="scroll">B</view>
+          <view data-id='c' bindtap="scroll">C</view>
+          <view data-id='d' bindtap="scroll">D</view>
+          <view data-id='e' bindtap="scroll">E</view>
+          <view data-id='f' bindtap="scroll">F</view>
+          <view data-id='g' bindtap="scroll">G</view>
+          <view data-id='h' bindtap="scroll">H</view>
+          <view data-id='i' bindtap="scroll">I</view>
+          <view data-id='j' bindtap="scroll">J</view>
+          <view data-id='k' bindtap="scroll">K</view>
+          <view data-id='l' bindtap="scroll">L</view>
+          <view data-id='m' bindtap="scroll">M</view>
+          <view data-id='n' bindtap="scroll">N</view>
+          <view data-id='o' bindtap="scroll">O</view>
+          <view data-id='p' bindtap="scroll">P</view>
+          <view data-id='q' bindtap="scroll">Q</view>
+          <view data-id='r' bindtap="scroll">R</view>
+          <view data-id='s' bindtap="scroll">S</view>
+          <view data-id='t' bindtap="scroll">T</view>
+          <view data-id='u' bindtap="scroll">U</view>
+          <view data-id='v' bindtap="scroll">V</view>
+          <view data-id='w' bindtap="scroll">W</view>
+          <view data-id='x' bindtap="scroll">X</view>
+          <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 id="nav_item" wx:for="{{zimu_list}}" wx:key="" data-index="{{index}}" 
+        data-id='{{item}}'      bindtap="scroll">
+    {{zimu_list[index]}}
+  </view>
 </view>
-    <view class="tt">A</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>
@@ -76,4 +83,93 @@
             <text>主办单位：中国科学院数学与系统科学...</text>
         </view>
     </navigator>
-</view>
+    <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>
+
+
+<!-- 当前选择字母提示框 -->
+<view class="hint_bok" hidden="{{hiddenn}}">{{nav_text}}</view>

pages/index/index.wxss

@@ -2,6 +2,11 @@
 page{
   background: #F1F1F1;
   padding: 30rpx 30rpx 0;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
 }
 .search{
   position: relative;
@@ -71,12 +76,12 @@ swiper-item image{
   padding: 20rpx 25rpx;
   margin: 20rpx 0 0;
   position: relative;
-  height: 57vh;
+  height: 60vh;
   overflow: auto;
 }
 .zm{
   position: fixed;
-  width: 17rpx;
+  
   
   right: 12rpx;
   top: 480rpx;
@@ -86,10 +91,14 @@ swiper-item image{
   justify-content: space-between;
   /* line-height: 12px; */
   text-align: center;
+  z-index: 999;
 }
 .zm view{
   color: #3780CD;
-  font-size: 18rpx;
+  font-size: 20rpx;
+  line-height: 12px;
+  /* border: 1px solid red; */
+  /* width: 60rpx; */
 }
 .tt{
   margin-bottom: 20rpx;
@@ -125,4 +134,34 @@ swiper-item image{
   .zm{
     top: 425rpx;
   }
+}
+
+.hint_bok{
+  position:fixed;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+  background:rgba(0,0,0,.5);
+  color:#fff;
+  width:100rpx;
+  border-radius:10rpx;
+  text-align:center;
+  padding:15rpx 0;
+  font-size:54rpx;
+}
+.nav{
+  position: fixed;
+  top: 425rpx;
+  right: 0;
+  width:30rpx;
+  z-index:1;
+}
+.nav.touchmove{
+  background:#ddd;
+}
+.nav view{
+  font-size: 20rpx;
+  color: #666;
+  text-align: center;
+  line-height: 26rpx;
 }

pages/logs/logs.js

@@ -1,15 +0,0 @@
-//logs.js
-const util = require('../../utils/util.js')
-
-Page({
-  data: {
-    logs: []
-  },
-  onLoad: function () {
-    this.setData({
-      logs: (wx.getStorageSync('logs') || []).map(log => {
-        return util.formatTime(new Date(log))
-      })
-    })
-  }
-})

pages/logs/logs.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "查看启动日志",
-  "usingComponents": {}
-}

pages/logs/logs.wxml

@@ -1,6 +0,0 @@
-<!--logs.wxml-->
-<view class="container log-list">
-  <block wx:for="{{logs}}" wx:for-item="log">
-    <text class="log-item">{{index + 1}}. {{log}}</text>
-  </block>
-</view>

pages/logs/logs.wxss

@@ -1,8 +0,0 @@
-.log-list {
-  display: flex;
-  flex-direction: column;
-  padding: 40rpx;
-}
-.log-item {
-  margin: 10rpx;
-}