微信小程序（5）--閱讀器

最近用微信小程序寫了一個圖書閱讀器，可以實現左右滑動翻頁，按鈕翻頁，上下滾動，切換背景，控制字體大小。以及記住設置好的狀態，如頁面再次進來保留上次的背景色和字體大小。

由於暫時沒有真實的數據接口，所以我用了靜態數據。

<!-- 文本 -->
<view class="container" style="background:{{bodyColor}}">
  <!-- 中間層，點擊，頭部底部顯示 -->
  <view class="artical-action-mid" bindtap="midaction"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>
  <!-- 主體內容 -->
  <scroll-view  scroll-top="{{scroll_top}}" class="m-read-content" scroll-y style="font-size:{{initFontSize}}px;" bindscroll="scrollContain" bindscrolltolower="bindscrolltolower" >
    {{Text}}
  </scroll-view>
</view>
<!-- 字體調節 -->
  <view class="top-nav-pannel font-container" style="display:{{ziti}}">
    <view class="child-mod">
     <view class="span">字號</view>
     <text class="spe-button" bindtap="bindBig">大</text>
     <text class="spe-button" style="margin-left:10px;" bindtap="bindSmall">小</text>
    </view>
    <view class="child-mod">
      <view class="span">背景</view>
      <block wx:for="{{colorArr}}" wx:for-item="color" wx:key="this">
        <view class="bk-container {{_num==index?'bk-container-current':''}}" data-num="{{index}}" style="background-color:{{color.value}}" bindtap="bgChange"></view>
      </block>
    </view>
  </view>
  <!-- 上一頁下一頁 -->
  <view class="m-button-bar" style="display:{{zj}}">
    <view class="u-tab">
      <view class="uli" bindtap="lastPage">上一頁</view>
      <view class="uli" style="border-right:none" bindtap="nextPage">下一頁</view>
    </view>
  </view>
  <!-- 底部 -->
  <view class="bottom-nav bottom_nav" style="display:{{nav}}">
    <view class="item menu-button">
      <view class="item-warp">
        <view class="icon-menu"></view>
        <view class="icon-text">目錄</view>
      </view>
    </view>
    <view class="item current" bindtap="zitiaction">
      <view class="item-warp">
        <view class="icon-ft"></view>
        <view class="icon-text">字體</view>
      </view>
    </view>
    <view class="item" bindtap="dayNight">
      <view class="item-warp" wx:if="{{daynight}}">
        <view class="icon-day"></view>
        <view class="icon-text">白天</view>
      </view>
      <view class="item-warp" wx:else>
        <view class="icon-night"></view>
        <view class="icon-text">夜間</view>
      </view>
    </view>
  </view>

//logs.js
var util = require('../../utils/util.js')
var touchDot = 0;//觸摸時的原點 
var time = 0;// 時間記錄，用於滑動時且時間小於1s則執行左右滑動 
var interval = "";// 記錄/清理時間記錄 
Page({
  data: {
    // logs: []
    scroll_top: 0,
    Text:"大婚當天，她在郊外醒來，衣衫襤褸，在眾人的鄙夷下，一步一個血印踏入皇城……她是無父無母任人欺凌的孤女，他是一人之下、萬人之上的鐵血王爺。她滿身是傷，狼狽不堪。他遺世獨立，風華無雙。她卑微伏跪，他傲視天下。如此天差地別的兩人，卻陰差陽錯地相遇……一件錦衣，遮她一身污穢，換她一世情深。21世紀天才女軍醫將身心托付，為這鐵血王爺風華天下、舔刃飲血、傾盡一切，只求此生結發為夫妻，恩愛兩不疑，卻不想生死關頭，他卻揮劍斬斷她的生路……醫者：下醫醫病，中醫醫人，上醫醫國。神醫鳳輕塵，以醫術救人治國平天下大婚當天，她在郊外醒來，衣衫襤褸，在眾人的鄙夷下，一步一個血印踏入皇城……她是無父無母任人欺凌的孤女，他是一人之下、萬人之上的鐵血王爺。她滿身是傷，狼狽不堪。他遺世獨立，風華無雙。她卑微伏跪，他傲視天下。如此天差地別的兩人，卻陰差陽錯地相遇……一件錦衣，遮她一身污穢，換她一世情深。21世紀天才女軍醫將身心托付，為這鐵血王爺風華天下、舔刃飲血、傾盡一切，只求此生結發為夫妻，恩愛兩不疑，卻不想生死關頭，他卻揮劍斬斷她的生路……醫者：下醫醫病，中醫醫人，上醫醫國。神醫鳳輕塵，以醫術救人治國平天下的傳奇的傳奇",
    initFontSize:'14',
    colorArr: [{
      value: '#f7eee5',
      name: '米白',
      font: ''
    }, {
      value: '#e9dfc7',
      name: '紙張',
      font: '',
      id: "font_normal"
    }, {
      value: '#a4a4a4',
      name: '淺灰',
      font: ''
    }, {
      value: '#cdefce',
      name: '護眼',
      font: ''
    }, {
      value: '#283548',
      name: '灰藍',
      font: '#7685a2',
      bottomcolor: '#fff'
    }, {
      value: '#0f1410',
      name: '夜間',
      font: '#4e534f',
      bottomcolor: 'rgba(255,255,255,0.7)',
      id: "font_night"
    }],
    nav:'none',
    ziti:'none',
    _num:1,
    bodyColor:'#e9dfc7',
    daynight:false,
    zj:'none'

  },
  onLoad: function () {
    // this.setData({
    //   logs: (wx.getStorageSync('logs') || []).map(function (log) {
    //     return util.formatTime(new Date(log))
    //   })
    // })
    // 本地提取字號大小
    var that = this;
    wx.getStorage({
      key: 'initFontSize',
      success: function (res) {
        // console.log(res.data)
        that.setData({
          initFontSize: res.data
        })
      }
    })
    //存儲背景色
    wx.getStorage({
      key: 'bodyColor',
      success: function (res) {
        // console.log(res.data)
        that.setData({
          bodyColor: res.data
        })
      }
    })
    wx.getStorage({
      key: '_num',
      success: function (res) {
        // console.log(res.data)
        that.setData({
          _num: res.data
        })
      }
    })
    wx.getStorage({
      key: 'daynight',
      success: function (res) {
        // console.log(res.data)
        that.setData({
          daynight: res.data
        })
      }
    })
    //數據接口
    wx.request({
      url: 'http://book.baiwancangshu.com/Books/bookRead', //僅為示例，並非真實的接口地址
      data: {
          "bookId": "86",
          "chapterId": "2",
          "isDel": 1, 
          "token": "",
          "os": 3,
          "channel": "", 
          "netname": "m" 
      },
      method:'POST',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  },
   //事件處理函數
   //字體變大
  bindBig: function () {
    var that=this;
    if (that.data.initFontSize>20){
      return;
    }
    var FontSize=parseInt(that.data.initFontSize)
    that.setData({
      initFontSize: FontSize +=1
    })
    // console.log(that.data.initFontSize)
    wx.setStorage({
      key: "initFontSize",
      data: that.data.initFontSize
    })
  },
  //字體變小
  bindSmall: function () {
    var that = this;
    if (that.data.initFontSize <12) {
      return;
    }
    var FontSize = parseInt(that.data.initFontSize)
    that.setData({
      initFontSize: FontSize -= 1
    })
    // console.log(that.data.initFontSize)
    wx.setStorage({
      key: "initFontSize",
      data: that.data.initFontSize
    })
  },
  //點擊中間區域顯示底部導航
  midaction:function(){
    if (this.data.nav=='none'){
      this.setData({
        nav:'block'
      })
    }else{
      this.setData({
        nav: 'none',
        ziti: 'none'
      })

    }
  },
  //點擊字體出現窗口
  zitiaction:function(){
    if (this.data.ziti == 'none') {
      this.setData({
        ziti: 'block'
      })
    } else {
      this.setData({
        ziti: 'none'
      })
    }
  },
  //選擇背景色
  bgChange:function(e){
    // console.log(e.target.dataset.num)
    // console.log(e)
    this.setData({
      _num: e.target.dataset.num,
      bodyColor: this.data.colorArr[e.target.dataset.num].value
    })
    wx.setStorage({
      key: "bodyColor",
      data: this.data.colorArr[e.target.dataset.num].value
    })
    wx.setStorage({
      key: "_num",
      data: e.target.dataset.num
    })
  },
  //切換白天夜晚
  dayNight:function(){
      if(this.data.daynight==true){
       this.setData({
         daynight:false,
         bodyColor:'#e9dfc7',
         _num:1
       })
       wx.setStorage({
         key: "bodyColor",
         data: '#e9dfc7'
       })
       wx.setStorage({
         key: "_num",
         data:1
       })

      }else{
        this.setData({
          daynight: true,
          bodyColor: '#000',
          _num:5
        })
        wx.setStorage({
          key: "bodyColor",
          data: '#000'
        })
        wx.setStorage({
          key: "_num",
          data:5
        })
      }
      wx.setStorage({
        key: "daynight",
        data: this.data.daynight
      })
  },
  //滾動隱藏窗口
  scrollContain:function(){
    this.setData({
      nav: 'none',
      ziti: 'none',
      zj:'none'
    })
  },
  //滾動到底部
  bindscrolltolower:function(){
    this.setData({
      zj: 'block',
    })
  },
  //上一頁下一頁
  lastPage:function(){
    this.setData({
      Text: '和婚禮相比，顧千城更秦雲楚見顧國公久久不給准話，再次威脅道：“顧公國，新娘換不換？本世子還等着新娘上花轎，至於顧千城這殘疾，你們愛嫁給誰就嫁讓她嫁給誰，總之本世子不要。”關心自己受傷的腳，她現在只希望這場鬧劇早點結束，不然她的腳撐不住。顧千城冷眼掃過觀禮的客人，這些人紛紛別過臉，一臉尷尬。一伙看看秦雲楚、一伙看看顧千城，無人開口。喜堂安靜得嚇人，似乎連針落地的聲道都能聽清這個時候，全福夫人收到示意，上前一步打破寂靜：“顧國公，這身有殘疾的女子確實不能嫁入皇家，顧家執意要大小姐嫁過去，只怕親家結不成，反倒結成仇家了。”“荒唐，這哪里荒唐了，難道要本世子吃這個啞巴虧，把一個殘廢娶回家？”秦雲楚一臉驕橫，殘疾二字越說越順口，看顧千城的眼神，也是一臉嫌惡。',
      scroll_top: 0
    })
  },
  nextPage:function(){
    this.setData({
      Text: '這一對翁婿，直接越過顧千城，也不管顧千城的意願，三言兩語就同意了換新娘達成所願，秦雲楚滿意的停下腳步，笑容滿面的轉身：“國公爺早同意不就沒事，至於我父王和母妃那邊，國公爺不必擔心，本世子自會解釋。”一事。和婚禮相比，顧千城更秦雲楚見顧國公久久不給准話，再次威脅道：“顧公國，新娘換不換？本世子還等着新娘上花轎，至於顧千城這殘疾，你們愛嫁給誰就嫁讓她嫁給誰，總之本世子不要。”關心自己受傷的腳，她現在只希望這場鬧劇早點結束，不然她的腳撐不住。顧千城冷眼掃過觀禮的客人，這些人紛紛別過臉，一臉尷尬。一伙看看秦雲楚、一伙看看顧千城，無人開口。喜堂安靜得嚇人，似乎連針落地的聲道都能聽清這個時候，全福夫人收到示意，上前一步打破寂靜：“顧國公，這身有殘疾的女子確實不能嫁入皇家，顧家執意要大小姐嫁過去，只怕親家結不成，反倒結成仇家了。”“荒唐，這哪里荒唐了，難道要本世子吃這個啞巴虧，把一個殘廢娶回家？”秦雲楚一臉驕橫，殘疾二字越說越順口，看顧千城的眼神，也是一臉嫌惡。',
      scroll_top: 0
    })
  },
  // 觸摸開始事件 
  touchStart: function (e) {
    touchDot = e.touches[0].pageX; // 獲取觸摸時的原點 
    // 使用js計時器記錄時間  
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 觸摸移動事件 
  touchMove: function (e) {
    var touchMove = e.touches[0].pageX;
    // console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
    // 向左滑動  
    if (touchMove - touchDot <= -40 && time < 10) {
      // wx.switchTab({
      //   url: '../左滑頁面/左滑頁面'
      // });
      // console.log("left")
      this.setData({
        Text: '和婚禮相比，顧千城更秦雲楚見顧國公久久不給准話，再次威脅道：“顧公國，新娘換不換？本世子還等着新娘上花轎，至於顧千城這殘疾，你們愛嫁給誰就嫁讓她嫁給誰，總之本世子不要。”關心自己受傷的腳，她現在只希望這場鬧劇早點結束，不然她的腳撐不住。顧千城冷眼掃過觀禮的客人，這些人紛紛別過臉，一臉尷尬。一伙看看秦雲楚、一伙看看顧千城，無人開口。喜堂安靜得嚇人，似乎連針落地的聲道都能聽清這個時候，全福夫人收到示意，上前一步打破寂靜：“顧國公，這身有殘疾的女子確實不能嫁入皇家，顧家執意要大小姐嫁過去，只怕親家結不成，反倒結成仇家了。”“荒唐，這哪里荒唐了，難道要本世子吃這個啞巴虧，把一個殘廢娶回家？”秦雲楚一臉驕橫，殘疾二字越說越順口，看顧千城的眼神，也是一臉嫌惡。',
        scroll_top: 0
      })
    }
    // 向右滑動 
    if (touchMove - touchDot >= 40 && time < 10) {
      // console.log('right');
      // wx.switchTab({
      //   url: '../右滑頁面/右滑頁面'
      // });
      this.setData({
        Text: '這一對翁婿，直接越過顧千城，也不管顧千城的意願，三言兩語就同意了換新娘達成所願，秦雲楚滿意的停下腳步，笑容滿面的轉身：“國公爺早同意不就沒事，至於我父王和母妃那邊，國公爺不必擔心，本世子自會解釋。”一事。和婚禮相比，顧千城更秦雲楚見顧國公久久不給准話，再次威脅道：“顧公國，新娘換不換？本世子還等着新娘上花轎，至於顧千城這殘疾，你們愛嫁給誰就嫁讓她嫁給誰，總之本世子不要。”關心自己受傷的腳，她現在只希望這場鬧劇早點結束，不然她的腳撐不住。顧千城冷眼掃過觀禮的客人，這些人紛紛別過臉，一臉尷尬。一伙看看秦雲楚、一伙看看顧千城，無人開口。喜堂安靜得嚇人，似乎連針落地的聲道都能聽清這個時候，全福夫人收到示意，上前一步打破寂靜：“顧國公，這身有殘疾的女子確實不能嫁入皇家，顧家執意要大小姐嫁過去，只怕親家結不成，反倒結成仇家了。”“荒唐，這哪里荒唐了，難道要本世子吃這個啞巴虧，把一個殘廢娶回家？”秦雲楚一臉驕橫，殘疾二字越說越順口，看顧千城的眼神，也是一臉嫌惡。',
        scroll_top: 0
      })
    }
  },
  // 觸摸結束事件 
  touchEnd: function (e) {
    clearInterval(interval); // 清除setInterval 
    time = 0;
  }
})