最近在學習微信小程序，所以把一些重點給記錄下來
廢話不多說，先來一波效果圖：
gif動圖太小了 這邊再來幾張圖片
重點說明 本接口數據來源於玩Android開放api
地址：https://www.wanandroid.com/
詳細功能介紹：
上邊是一個可滑動的橫向分類欄 下面是點擊分類欄切換到的界面以及下邊可滑動改變當前頁面數據，以及數據在請求數據時加載時間過長，所以將已加載過的數據進行本地化存儲，向左滑動時就不用再發送請求
代碼：(Own.wxml)
<view class="tab">
<scroll-view class="nav" scroll-x="true" scroll-left="{{scrollLeft}}">
<block wx:for="{{allTitle}}" wx:for-index="idx" wx:key="idex">
<view class="nav-item {{currentIndex==idx ? 'active' : ''}}" data-current="{{idx}}" bindtap="changeTitle">{{item.title}}</view>
</block>
</scroll-view>
</view>
<swiper class="content-container" current="{{currentIndex}}" circular="{{false}}" bindchange="changeContent">
<block wx:for="{{allTitle}}" wx:key="id">
<swiper-item class="content">
<x-my playlist="{{playlist}}"></x-my>
</swiper-item>
</block>
</swiper>
Own.wxss
page{
width: 100%;
height: 100%;
}
.tab {
width: 100%;
height: 100%;
display: flex;
/* 豎直排列 */
flex-direction: column;
}
.nav {
height: 80rpx;
width: 100%;
overflow: hidden;
/* 段落中的文本不進行換行 */
white-space: nowrap;
line-height: 80rpx;
font-size: 26rpx;
/* 固定定位 不會隨着屏幕滾動而滾動 */
position: fixed;
top: 0;
left: 0;
/* 顯示的層級 負值時在最底層 正值越大 越先看得見 */
z-index: 99;
}
.nav-item {
width: 25%;
display: inline-block;
text-align: center;
}
.active {
color: #FF6471;
position: relative;
}
.active:after{
content: "";
display: block;
width:100%;
height: 5rpx;
border-radius: 8rpx;
background: #FF6471;
position: absolute;
bottom: 0;
}
.content-container {
padding-top: 80rpx;
height: 90%;
width: 100%;
}
swiper-item{
overflow: scroll;
}
/* 隱藏滾動條 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
Own.js
let id =294
let shared = []
Page({
/**
* 頁面的初始數據
*/
data: {
allTitle: [
{ id: 294, title: '完整項目' },
{ id: 402, title: '跨平臺應用' },
{ id: 367, title: '資源聚合類' },
{ id: 323, title: '動畫' },
{ id: 314, title: 'RV列表動效' },
{ id: 358, title: '項目基礎功能' },
{ id: 328, title: '網絡文件下載' },
{ id: 331, title: 'TextView' },
{ id: 336, title: '鍵盤' },
{ id: 337, title: '快應用' },
{ id: 338, title: '日曆時鐘' }
],
currentIndex: 0, //當前選中標題的下標
scrollLeft: 0, //tab滾動條的位置
playlist:[],
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this._initdata()
},
_initdata(){//初始化分類下的文章數據
if (wx.getStorageSync(id.toString()) != ''){
this.setData({
playlist: wx.getStorageSync(id.toString())
})
}else{
wx.showLoading({
title: '加載中...',
})
wx.cloud.callFunction({
name:'test',
data:{
id,
$url:'type',
}
}).then((res)=>{
this.setData({
playlist:res.result.datas,
})
wx.hideLoading()
shared = res.result.datas
wx.setStorageSync(id.toString(), shared)
})
//直接將playlist值賦值給新數組 先判斷新數組是否有當前數據
}
},
//點擊切換標題
changeTitle(event) {
let index = event.target.dataset.current;//當前點擊標題的index
this.setData({
currentIndex: index
})
},
//滑動切換內容
changeContent(event) {
let current = event.detail.current;
//獲取系統可使用窗口寬度
let singleNavWidth = wx.getSystemInfoSync().windowWidth / 4;
this.setData({
playlist:[],
currentIndex: current,
scrollLeft: (current - 2) * singleNavWidth //當scrollLeft爲負值時無變化 當前scrollLeft移動了n個singleNavWidth 橫向滾動條就移動幾個n
});
id = this.data.allTitle[current].id
console.log(id)
this._initdata()
}
,
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
我的雲函數網絡請求 這裏你也可以直接發送請求 不用按照我寫的操作
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init(
{
traceUser: true,
env: 'guard-5znfa'
}
)
const db = cloud.database();//雲數據庫初始化
const rp = require('request-promise')
const TcbRouter = require('tcb-router')
const LINK = 'https://www.wanandroid.com/project/list/1/' //項目分類下的文章
// 雲函數入口函數
exports.main = async (event, context) => {
const app = new TcbRouter({ event });
app.router('type',async(ctx,next)=>{
return ctx.body = await rp(LINK + `json?cid=${event.id}`).then((res)=>{
return JSON.parse(res).data
})
})
return app.serve();
}