1.增加搜索关键字高亮2.诗句详情页tab切换增加动画效果

pages/index/index.js

@@ -17,15 +17,40 @@ Page({
   searchPoem(key){
     let _this = this;
     let resultList = [];
-    let originList = poemList;
+    let originList = JSON.parse(JSON.stringify(poemList));
     for (var i = 0; i < originList.length; i++){
       let poem = originList[i];
       if(_this.poemMatchKey(poem,key)){
-        resultList.push(poem);
+        //处理高亮数据
+        let data = _this.handleHighlightKeyword(poem, key);
+        resultList.push(data);
       }
     }
     return resultList;
   },
+  //处理高亮数据
+  handleHighlightKeyword(data, key){
+    let _this = this;
+    let titleArr = data.title.split(key);
+    let title = data.title.indexOf(key) != -1?_this.handleHighlightArr(titleArr, key): titleArr;
+    let authorArr = data.author.split(key);
+    let author = data.author.indexOf(key) != -1 ?_this.handleHighlightArr(authorArr, key): authorArr;
+    let summaryArr = data.summary.split(key);
+    let summary = data.summary.indexOf(key) != -1 ?_this.handleHighlightArr(summaryArr, key): summaryArr;
+    data.title = title;
+    data.author = author;
+    data.summary = summary;
+    return data;
+  },
+  handleHighlightArr(list, key){
+    let arr = [];
+    list.forEach((item, index) => {
+      arr.push(item);
+      if(index != list.length-1)
+        arr.push(key)
+      })
+    return arr;
+  },
   // 判断一首诗是否命中关键词
   poemMatchKey(poem,key){
     if(poem.title.indexOf(key) != -1) {
@@ -47,27 +72,31 @@ Page({
     _this.goPage(url);
   },
   getKeyword(e){
-    let _this = this, poemData;
-    if (e.detail.value){
-      poemData = _this.searchPoem(e.detail.value);
-      _this.setData({
-        keyword: e.detail.value
-      })
-    }else{
-      poemData = poemList
-    }
+    let _this = this, poemData,
+      keyword = e.detail.value.trim();
     _this.setData({
-      listData: poemData
-    })
-    if(_this.data.listData.length == 0){
-      _this.setData({
-        noData: true
-      })
-    }else{
+      keyword
+    },()=>{
+      if (keyword) {
+        poemData = _this.searchPoem(keyword);
+      } else {
+        poemData = poemList
+      }
       _this.setData({
-        noData: false
+        listData: poemData
+      }, () => {
+        if (_this.data.listData.length == 0) {
+          _this.setData({
+            noData: true
+          })
+        } else {
+          _this.setData({
+            noData: false
+          })
+        }
       })
-    }
+    })
+
   },
   goPage(url){
     wx.navigateTo({

pages/index/index.wxml

@@ -8,7 +8,7 @@
   </view>
   <view style="height: 108rpx;"></view>
   <view class="content" wx:if="{{!noData}}">
-    <view class="list" wx:for="{{listData}}" wx:key="index" data-data="{{item}}" bindtap="goDetail">
+    <view class="list" wx:if="{{!keyword}}" wx:for="{{listData}}" wx:key="index" data-data="{{item}}" bindtap="goDetail">
       <view class="left">
         <view class="title">{{item.title}}</view>
         <view class="sub-title">{{item.summary}}</view>
@@ -17,6 +17,20 @@
         <view class="des">[{{item.dynasty}}]{{item.author}}</view>
       </view>
     </view>
+    <view class="list" wx:if="{{keyword}}" wx:for="{{listData}}" wx:key="index" data-data="{{item}}" bindtap="goDetail">
+      <view class="left">
+        <view class="title">
+          <text wx:if="{{value}}" wx:for="{{item.title}}" wx:key="key" wx:for-item="value" class="{{value == keyword? 'active': ''}}">{{value}}</text>
+        </view>
+        <view class="sub-title">
+          <text wx:if="{{value}}" wx:for="{{item.summary}}" wx:key="key" wx:for-item="value" class="{{value == keyword? 'active': ''}}">{{value}}</text>
+        </view>
+      </view>
+      <view class="right">
+        <view class="des">[{{item.dynasty}}]<text wx:if="{{value}}" wx:for="{{item.author}}" wx:key="key" wx:for-item="value" class="{{value == keyword? 'active': ''}}">{{value}}</text>
+        </view>
+      </view>
+    </view>
     <view class="list-tips">已经到底了哟~</view>
   </view>
   <view class="no-data" wx:else>

pages/index/index.wxss

@@ -63,6 +63,9 @@
   text-overflow:ellipsis;
   white-space: nowrap;
 }
+.content .list .active{
+  color: #ff4c00!important;
+}
 .content .list .left .sub-title{
   font-size: 24rpx;
   color: #666;

pages/poemDetail/poemDetail.js

@@ -73,9 +73,18 @@ Page({
    */
   selectOption(e){
     let _this = this,
-      optionid = e.currentTarget.dataset.optionid;
+      optionid = e.currentTarget.dataset.optionid,
+      left = "calc(33.3% * "+optionid+" + 16.6% - 60rpx)",
+      animation = wx.createAnimation({
+        duration: 200,
+        timingFunction: "linear",
+        delay: 0,
+        transformOrigin: "50% 50%"
+      });
+    animation.left(left).step();
     _this.setData({
-      optionid
+      optionid,
+      animationData: animation.export()
     });
   },
   /**

pages/poemDetail/poemDetail.wxml

@@ -17,6 +17,7 @@
         <view class="item-des {{optionid == 2?'active':''}}">赏析</view>
       </view>
     </view>
+    <view class="option-line" animation="{{animationData}}"></view>
     <view class="appreciation-content" wx:if="{{optionid == 0}}">
       <view wx:for="{{annotation}}" wx:key="index">
         <text class="sp">{{item.sp}}</text><text>{{item.def}}</text>

pages/poemDetail/poemDetail.wxss

@@ -24,6 +24,15 @@
 /**注释部分**/
 .appreciation {
   width: 100%;
+  position: relative;
+}
+.appreciation .option-line{
+  height: 6rpx;
+  width: 120rpx;
+  background: #ff4c00;
+  position: absolute;
+  top: 122rpx;
+  left: calc(16.6% - 60rpx);
 }
 .appreciation .option-bar{
   width: 100%;
@@ -51,7 +60,6 @@
 }
 .appreciation .option-bar .item .active{
   color: #ff4c00;
-  border-bottom: 6rpx solid #ff4c00;
 }
 .appreciation .appreciation-content{
   font-size: 30rpx;