NBA資訊小程式出來啦
作為一個剛接觸小程式不久的前端小白菜，恰逢最近NBA如火如荼的雙搶七大戰、騎士與勇士又又又又又一次的巔峰對決(實話：真的看膩了- -),決定寫一個NBA資訊的小程式來玩玩。下面講講小程式的開發
- 開發工具：vscode 微信開發者工具
- 開發技術：(Wxml)Html (Wxss)css javascript
- 開發流程：註冊一個appid就可以馬上進行開發了簡易教程
這裡還要提一下兩個網站Easy Mock、Iconfont
前者是可以快速生成模擬資料的持久化服務這裡展示下我的資料介面
後者是可以找到許多你想要的小圖示庫
效果圖
身為新手寫的過程中不碰到些問題那怎麼可能呢- -
下面就來講講我碰到的那些問題吧~
1.首頁日期比賽資料切換(就是那個能點能橫滑的部分)
當時看到這覺得無非就是左右button點選事件進行切換資料 然後再跟滑動date繫結一起 想到就開始寫 左右點選一下就寫完了
changeleft:function() {
const index = this.data.index - this.data.num;//獲取改變後的那組資料下標
this.setData({
agenda: this.data.result[index],// 將球隊名 球隊分數傳入
light: this.data.result[index].leftgrade >
this.data.result[index].rightgrade ? '1' : '2', //比較分數大小 將分數高的color改變
index: index,
current:index,
showLeft: true,//改變圖示為淺色圖示
})
}
複製程式碼注意一個細節，當左右沒有更多資料切換時 圖示顏色會改變 變淺色 示意不能點了 所以要進行if判斷左右兩邊是否為臨界值 也就是陣列的第一項和最後一項。
turnleft: function (e) {
const index = this.data.index -this.data.num;
if (index <= -1) {
return;
} else if (index == 0) {
this.changeleft();
} else {
this.changeleft();
this.setData({
showLeft: false,
showRight: false,
})
}
},
複製程式碼這裡展示左邊的方法 右邊類似。於是開始著手寫滑動那部分，這裡就吃了沒有經驗的大虧了，想到滑動立馬想到了scroll-view 噼裡啪啦寫了一堆，可一點選我傻了 這日期是瞬間變化 沒有滑動的那個效果啊，難道是這個不行？ 於是我又使用scroll-left 算距離 每一項設定好padding 寫了許久也算是完成了 一試還是沒有滑動效果...(一口老血吐出來)
最後還是用swiper搞定了這效果
swiperchange:function(e) {
const current = e.detail.current;//取當前swiper index
const ind = this.data.index;//之前陣列的index
const dex = current - ind;//判斷左滑右滑
if(current-ind >0){
this.setData({
num:dex //滑動多少項
})
this.turnright() //左滑事件
this.setData({
num:1 //必須回1 因為點選事件每次改變的陣列項為1
})
}else if(current - ind <0){
this.setData({
num:-dex
})
this.turnleft()
this.setData({
num:1
})
}
複製程式碼2.文章頁返回
back: function (e) {
wx.switchTab({
url: "../../pages/index/index"
});
}
複製程式碼3.scroll-view滑動問題
很多人可能會碰到swiper不能滑動等問題要注意以下幾點
-
scroll-view 中的需要滑動的元素不可以用 float 浮動；
-
scroll-view 中的包裹需要滑動的元素的大盒子用 display:flex; 是沒有作用的；
-
scroll-view 中的需要滑動的元素要用 dislay:inline-block; 進行元素的橫向編排；
-
包裹 scroll-view 的大盒子有明確的寬和加上樣式--> overflow:hidden; white-space:nowrap;
4.上拉載入下拉重新整理問題
- 下拉重新整理需要在當前頁的json或者app.json設定
"enablePullDownRefresh": true, - 下拉事件一定要加wx.hideLoading() 不然重新整理小點一直出現
onPullDownRefresh() {
// console.log('下拉了');
wx.showLoading({
title: '玩命載入中',
})
wx.request({
url: API_BASE,
success: (res) => {
this.setData({
news: res.data.data.new,
currentPage: 1,
hide:false
})
wx.hideLoading();//!!!一定要加
wx.stopPullDownRefresh()
}
})
},
複製程式碼- 上拉載入可以使用 onPullDownRefresh() 或者bindscrolltolower() 前者是頁面觸底 後者是scroll滾動條到底部，二者視情況使用。
onReachBottom() {
let { currentPage, totalPages } = this.data //解構當前頁和共幾頁 es6語法
if (currentPage >= totalPages) {
this.setData({
hide:true,
})
return;
}
wx.showLoading({
title: '玩命載入中',
})
currentPage += 1; //頁數+1
wx.request({
url: API_BASE,
success: (res) => {
const news = [ //將請求的資料和原本的資料一起放入
...this.data.news,//擴充套件運算子（ spread ）是三個點（...）。它好比 rest 引數的逆運算，將一個陣列轉為用逗號分隔的引數序列 es6語法
...res.data.data.new,
];
this.setData({
news,
currentPage
})
wx.hideLoading();
}
})
},
複製程式碼5.wx:if選擇渲染問題
在我的專案中 有很多需要單獨新增樣式 或者事件操作 可以使用wx:if 配合block進行選擇渲染
<block wx:if="{{video.title == item.title}}">
<view class="btn" style="display: none;"></view>
<text class="content-title " style="white-space: normal;color: #42F32F;">{{item.title}}</text>
</block>
<block wx:else>
<view class="btn" ></view>
<text class="content-title" style="white-space: normal;">{{item.title}}</text>
</block>
複製程式碼6.navigator跳轉問題
var that = this;
var id = that.data.new.id;//獲取文章id
if (id === 'n8') {//判斷是否為最後一篇
wx.showModal({
title: '提示',
content: '沒有更多內容了',
showCancel: false,
success: function (res) {
} })
return; //為最後一篇則無需請求資料
}
wx.request({
url: API_BASE,
success: (res) => {
for (let i = 0; i < res.data.data.new.length; i++) {
if (id === res.data.data.new[i].contentId) { //判斷是否請求到對應資料
// console.log("找到了");
this.setData({
news: res.data.data.new[i + 1],//將請求到資料的資料傳入
})
var it = this;
wx.navigateTo({
url: 'news?id=' + this.data.news.contentId + '&title=' + this.data.news.title + '&from=' + this.data.news.from + '&image=' + this.data.news.image + '&content=' + this.data.news.content + ''
})
}
}
}
})
},
複製程式碼寫在最後
在寫專案中還有碰到許多問題,video黑邊 scroll-view文字換行等問題，大家百度或者檢視官方文件大都能解決。
由於是初學小程式不久，很多方面沒有考慮好 沒有對request等進行封裝，模組元件化，寫了很多重複的程式碼。不過這都不是事，誰不是先爬再跑的!
想了解更多可以檢視我的專案
歡迎大家提供寶貴的建議和意見，社群重在分享，有啥好東西就別藏著啦