手把手擼一個SF思否小程序

最近開始將本身寫的一些小程序開源到GitHub上面，爲的是更好檢驗本身的編程能力，爲本身後面的開源項目走出一條新的道路。

咱們先看看個人小程序首頁效果圖

主要功能：個人訂閱和近期熱門和最新內容支持左右滑動，模仿SF思否app交互式，嵌入一個swiper和N個scroll-view這樣咱們就能夠分開視圖滾動和切換視圖。

如下是核心代碼

<view class='index_swiper'>
    <swiper bindchange="changSwiper" current="{{ indexValue }}" style="height:calc(100vh - {{paddingValue}}px)"> <block wx:for="{{ containerData }}" wx:key="container{{ index }}"> <swiper-item> <scroll-view scroll-y style="height:inherit" bindscrolltolower="scrolltolower" data-index='{{ index }}'> <view class='index_swiper_box' id="{{ item.name }}"> <block wx:for="{{ item.data }}" wx:key="item{{ index }}"> <homeModule></homeModule> </block> </view> </scroll-view> </swiper-item> </block> </swiper> </view>複製代碼

height:calc(100vh - {{paddingValue}}px)的意思是獲取屏幕高度減去頭部搜索加選擇的頭部就能夠得出咱們swiper的高度，因爲咱們想作到多個滑動視圖，咱們須要去經過數據進行配置

tabData: [{
        text: "個人訂閱"
      },
      {
        text: "近期熱門"
      },
      {
        text: "最新內容"
      },
    ],複製代碼

這個是配置選擇的頭部

containerData: [{
        name: 'subscribe',
        data: [1, 2, 3]
      },
      { 
       name: 'hot', 
       data: [1, 2, 3, 5, 6, 5, 6, 5]
      },
      {
        name: 'newest',
        data: [1, 2, 3, 6, 5]
      }
    ]
  },複製代碼

這個是配置scroll-view的數量 name：求換到第幾個的id相似於錨點  data是數據，由於咱們沒有服務端，就只能寫一個組件經過data去渲染數據。

核心js代碼：

selectOne: function(e) {
    //用於用戶用戶使用滑動切換觸發頭部對用位置更新
    this.setData({
      indexValue: e.currentTarget.dataset.index,
    });
  },//用於點擊選擇的頭部切換到相應的位置複製代碼

changSwiper: function(res) {
    if (res.detail.source == "touch") {
      this.setData({ 
       // 獲取到當前側滑的索引
        indexValue: res.detail.current,
      });
    }
  }, 複製代碼

scrolltolower:function(res){
    //用於scroll-view模擬用戶滾動到底部，加載更多，由於我這邊沒有服務器，就只能用數組去模擬從服務器獲取到數據
    var index = res.currentTarget.dataset.index;
    var data = [...this.data.containerData[index].data, ...[2, 5, 6, 8]]
    var name = `containerData[${index}].data`;
    console.log(name);
    this.setData({
      [name]: data
    })
  } 複製代碼

這樣咱們就能夠實現相似於掘金小程序上首頁滑動切換視圖

個人發現模塊主要是一些組件嵌入進去，比較麻煩就是輪播圖那塊，我已經將他寫成一個組件，爲下個講堂模塊複用，這一塊相信你們均可以實現的，我也把代碼上傳到GitHub上面，有興趣的能夠上去看看。

咱們主要看看頂部那塊標題，他的交互是根據你的滾動的位置去控制標題的字體大小和位置

咱們看核心代碼

<view class='navigation' style=' background-color:{{ color }}'>
  <view class='navigation_box'> <view class='navigation_box_return' bindtap='callBack'> <image src='./image/return.svg'></image> </view> <view class='navigation_box_image' bindtap='showSearch' wx:if="{{ search }}"> <image src='./image/search.svg'></image> </view> <view class='navigation_box_image narrow' bindtap='showEdit' wx:if="{{ edit }}"> <image src='./image/edit.svg'></image> </view> </view>
  <view class='navigation_text' style='font-size:{{ defaultFace }}px;margin-top:{{ marginTop }}px; margin-left: {{ marginLeft }}px'>
    <text>{{ title }}</text>
  </view></view>

複製代碼

properties: {
    title: {
      //接收傳過來的標題名稱
      type: String 
   },
    searchValue: {
      //接收傳過來是否顯示搜索按鈕
      type: String,
      observer: function(newVal) {
        var flag = newVal == "false" ? false : true;
        this.setData({
          search: flag
        });
      }
    },
    editValue: {
      //接收傳過來是否顯示編輯按鈕
      type: String,
      observer: function(newVal) {
        var flag = newVal == "false" ? false : true;
        this.setData({ 
         edit: flag
        }); 
     }
    }, 
   top: { 
     //接收傳過來是否滾動的值 
     type: Number,
     observer: function(newVal, oldVal, changedPath) {
     this.setData({
          currentValue: newVal
        });
        var deviation = newVal - oldVal; //向下滾動的誤差值
        var devContrary = oldVal - newVal; //向上滾動的誤差值
        if (deviation > 0) {
          var mt = this.data.marginTop - deviation / 4 <= -25 ? -25 : this.data.marginTop - deviation / 4;
          var ml = this.data.marginLeft + deviation / 2.5 >= 50 ? 50 : this.data.marginLeft + deviation / 2.5;
          var faceValue = this.data.defaultFace - deviation / 10 <= 20 ? 20 : this.data.defaultFace - deviation / 10;
          if (this.data.currentValue <= 125) {            var colorValue = "transparent";
          } else {
            var colorValue = "#fff";
          }
       } else {
          if (this.data.currentValue <= 125) {
            var mt = this.data.marginTop + devContrary / 4 >= 10 ? 10 : this.data.marginTop + devContrary / 4;
            var ml = this.data.marginLeft + deviation / 2.5 <= 0 ? 0 : this.data.marginLeft + deviation / 2.5;
            var faceValue = this.data.defaultFace + devContrary / 10 >= 30 ? 30 : this.data.defaultFace + devContrary / 10;
            var colorValue = "transparent";
          } else {
            var mt = -25;
            var ml = 50;
            var faceValue = 20;
            var colorValue = "#fff";
          }
        } 
       this.setData({
          marginTop: mt,
          marginLeft: ml,
          defaultFace: faceValue,
          color: colorValue
        })
      }
    },    bgColor: {
      //接收傳過來的背景顏色
      type: String,
      observer: function(newVal) {
        this.setData({
          color: newVal
        });
      }
    }
  },複製代碼

咱們經過接收值的方式，拿到相應導航欄的配置，接收滾動的位置，經過老值和新值相減來知道是向下滾動仍是向上滾動，這樣咱們經過三元表達式來知道是否超出咱們規定的一個值，由於咱們滾動的值會愈來愈大，咱們須要去除以一個整數來使得這個標題的變化更明顯。

講堂這個模塊也是如此，好多的複用組件插入進來，這個部分很簡單

消息模塊是一個靜態頁面，因爲時間問題，我如今沒有開發

這是個人模塊，裏面大多數功能我已經實現好了，主要邏輯也是組件，文件配置等，這部分我會下章爲你們詳細講解，因爲開發週期才差很少一個月好多東西我都沒有弄好，抱歉，能力有限，在後面的時間我會完善這些功能項目差很少有20多個頁面和10幾個組件，我以爲在這個項目中學到好多小程序的知識，特地寫這篇文章給你們分享一下。

最後，附上項目的GitHub地址：SF思否小程序

文章轉載請聯繫我：qq：652165177，請不要用於商業用途，若有版權問題請聯繫我！