微信小程式-仿今日頭條客戶端
阿新 • • 發佈：2019-01-31
歡迎訪問我的微信小程式：
（本小程式是模仿新聞類的app做的一個小程式）
在此特別感謝： 有夢想的程式丶猿 提供的免費開放介面API
本次發版主要實現功能如下：（2018年7月5日釋出）
效果圖如下
1.實現底部的2個tab顯示：（首頁，我的頁面）
在app.json內配置如下程式碼，即可實現底部的tab；
"tabBar": {
"color": "#ccc",
"selectedColor": "#00FF00",
"borderStyle": "white",
"backgroundColor" 2.實現頂部的4個頁籤的顯示以及滑動；
<view class="swiper-tab">
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">推薦</view>
<view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current 3.實現內容頁列表的上拉重新整理和下拉載入更多功能；
上面2中的下面程式碼，實現了上拉載入和下拉重新整理功能
bindscrolltolower="bindDownLoad" bindscrolltoupper="refresh"4.實現模板化展示資料；
上面2中的下面程式碼，實現模板功能
<import src="../../utils/template.wxml" />
<template is="{{item.type == '29' ? 'joy-text' :
(item.type == '10' ? 'joy-pic' :
(item.type == '41' ? 'joy-video' : 'joy-pic'))}}" data="{{...item}}"></template>5.實現資料的本地收藏和取消收藏功能；
···
wx.setStorage({
key: “collects”, //以使用者id和使用者建立該資料的時間作為唯一的key
data: JSON.stringify(itemArr),
success: function() {}
})
//收藏和取消收藏使用了一個key，收藏時將陣列新增一個元素；取消收藏時將陣列減去該元素；
···
6.實現頁面的跳轉功能，轉發功能；
//實現跳轉頁面功能
bindViewTap: function(event) {
var item = event.currentTarget.dataset.item;
wx.navigateTo({
url: '../detail/detail?jsonStr=' + JSON.stringify(event.currentTarget.dataset.item),
success: function(res) {
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}, /**
* js檔案中新增下面程式碼，使用者即可以點選右上角分享
*/
onShareAppMessage: function() {
wx.showToast({
title: '你好',
icon: '',
image: '',
duration: 0,
mask: true,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}7.實現本地收藏資料的列表顯示功能； 等
//js中獲取所有收藏的資料，並通過頁面展示出來，此處是獲取本地收藏資料
requesLocalData:function(){
var list = [];
try {
var value = wx.getStorageSync('collects');
if (value) {
// Do something with return value
var itemArr = JSON.parse(value);
if (itemArr) {
list = itemArr;
}
}
} catch (e) {
// Do something when catch error
wx.showToast({
title: '獲取快取資料出錯',
icon: 'fail'
})
}
this.setData({
collects: list,
})
}