aos动画库反向播放，pdf复制出现乱码，微信小程序底部栏联系客服

​记录一些遇到的问题…

本文大概3000字，阅读大概需要9分钟

**

一、pdf复制出现乱码问号问题

上网一顿搜索，答案五花八门，有的说是pdf加密了，有的说生成pdf的字体是内嵌字体，电脑里缺失这种字体所以出现乱码或者问号的问题。
但是这些方法都解决不了复制文本，黏贴文本的问题，文本少的话当然自己打比较方便，但是文本如果过多了的话，那就是个繁琐的工作了，我们写程序的当然是简化工作。
所以我们解决的方法是将pdf文件截图保存为图片的形式，然后利用ocr以图识字，然后再将识别出来的文字复制下来。
具体操作如下：

上传图片后，点击免费转换：

点击查看：

就可以直接复制黏贴。

---

二、aos动画库反向播放问题

Aos动画库导致元素消失，刷新页面可以看到它时反向播放然后消失了，如下所示：

可以很明显的看到，播放动画相反了，并且元素最后一帧是消失的状态。
那么出现这个问题的原因，你的样式文件写了overflow-x: hidden; height: 100vh;属性，导致了某些样式的冲突，把这属性删了用其他的代替：

删除完之后的效果：

可以看到现在很完美的复现了，并且每次滚动动画都会重新播放。

---

三、微信小程序底部栏联系客服

我们知道微信小程序中默认在app.json中配置底部tabbar，如下：

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/index1.png",
        "selectedIconPath": "images/index2.png"
      },
      {
        "pagePath": "pages/fruit/fruit",
        "text": "果蔬",
        "iconPath": "images/fruit.png",
        "selectedIconPath": "images/fruit-active.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "images/order.png",
        "selectedIconPath": "images/order-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  },

可以看出，每个底部按钮对应切换的页面，这就导致不够灵活，比如我想要在底部自定义点击跳转咨询客服上，那么我们知道现在小程序跳转咨询客服是集成wxml在button组件的openType="contact"上，那么利用当前这种写法肯定是达不到的，所以我们在项目的根目录下创建custom-tab-bar文件夹（自定义小程序底部tabbar组件）：

index.js写入：

// pages/custom-tab-bar/custom-tab-bar.js
Component({
  data: {
    selected: 0,
    color: "#000000",
    usingComponents: {},
    selectedColor: "#328EEB",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "主页",
        iconPath: "/images/index1.png",
        selectedIconPath: "/images/index2.png"
      },
      {
        pagePath: "/pages/fruit/fruit",
        text: "果蔬",
        iconPath: "/images/fruit.png",
        selectedIconPath: "/images/fruit-active.png"
      },
      {
        // pagePath: "/pages/order/order",
        text: "客服",
        iconPath: "/images/contact.png",
        selectedIconPath: "/images/contact-active.png"
      },
      {
        pagePath: "/pages/my/my",
        text: "我的",
        iconPath: "../images/my1.png",
        selectedIconPath: "../images/my2.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      const text = data.text
      this.setData({
        selected: data.index
      })
      if (text == '客服') {
        return
      }
      wx.switchTab({url})
      
    }
  }
})

---

index.json写入：

{
  "component": true
}

---

index.css写入：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
.btn {
  background-color: transparent;
}
.contact-img {
  transform: translateY(5px);
}

---

index.wxml写入：

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" data-text="{{item.text}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    
    <button class="btn" wx:if="{{item.text == '客服'}}" openType="contact">
      <cover-image class="contact-img" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}
    </cover-view>
    </button>
    <cover-image wx:if="{{item.text != '客服'}}" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view wx:if="{{item.text != '客服'}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}
    </cover-view>
    
  </cover-view>
</cover-view>

可以看到我们在客服这里自定义了<button class="btn" wx:if="{{item.text == '客服'}}" openType="contact">可以看到这就更灵活了，可以满足底部为客服咨询的场景。并且为了解决每次点击闪一下高亮显示的问题，在每个对应的底部页面栏中写入如下代码：

 onShow() {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 3
        })
      }
  },

selected为具体的页面栏索引。

如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。