獨立開發者從0到1釋出一個微信小程式的採坑過程——詳情頁實現
需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。
實現的效果如下：
開獎詳情頁.png
分析實現過程:
上面的截圖從四個部分分析了該頁面的實現：
- 第一部分是導航欄的名字
- 第二部分是開獎結果，也是這裡實現的難點
- 第三部分是下方的獎項列表
- 第四部分是底部的分享和歷史開獎按鈕
第一部分 導航欄 的實現
這塊沒啥說的就是頁面跳轉的同時將名稱傳遞過來，然後在這邊接受後顯示。
ofollow,noindex">官方文件---事件
首頁跳轉詳情頁：
- 在首頁 wxml 中定義點選捕捉事件
catchtap="onLotteryTap" ：定義點選事件
data-name="{{lottery_name}}" ：定義傳遞過去的資料名稱和值
<template name="lotteryItemTemplate">
<view class="item" catchtap="onLotteryTap" data-id="{{lottery_id}}" data-name="{{lottery_name}}">
<view class="lottery-item">
<view wx:if="{{ show_bubble }}" class='reddot'>開獎啦</view>
<view class='lottery-item-name'>
<text class="lottery-name">{{ lottery_name }}</text>
<text class="lottery-time">{{ remarks }}</text>
</view>
</view>
</view>
</template>
- 在首頁 js 中處理捕捉事件並跳轉
event.currentTarget.dataset.name：獲取到 wxml 中繫結的值
target 和 currentTarget 的區別
target：觸發事件的源元件。也就是指向的是觸發事件的元素，點選的目標 view，如果該 view 沒有新增捕獲事件則通過 target 不會獲取到值。
currentTarget：事件繫結的當前元件。也就是指向的是捕獲事件的元素，哪個 view 設定了事件捕獲，通過 currentTarget 獲取的值就是在該 view 中傳遞的值。
/**
* 點選進入開獎詳情
*/
onLotteryTap: function(event) {
var lottery_id = event.currentTarget.dataset.id;
var lottery_name = event.currentTarget.dataset.name;
var lottery_no = '';
wx.navigateTo({
url: "../lottery-detail/lottery-detail?id=" + lottery_id + "&name=" + lottery_name + "&no=" + lottery_no
})
},
- 在詳情頁面接收結果，並設定標題 options.name
var id = options.id;
var name = options.name;
this.lottery_no = options.no;
// 設定標題
wx.setNavigationBarTitle({
title: name,
})
第二部分 開獎號碼 的實現
這塊的實現難點有三個
- 將伺服器返回的字串進行分割轉為本地的一個數組
// 本地集合
var tempLotterys = [];
// 分割字串
var lottery_number = this.lotterys.lottery_res.split(',');
// 再通過 for 迴圈新增到本地集合中 tempLotterys
- 頁面的顯示
<!-- 水平的開獎號碼 -->
<view class='view-lottery-number'>
<view class='view-lottery'>
<!-- for 實現 水平的開獎號碼 -->
<block wx:for="{{lotteryNumbers}}" wx:for-item="item" wx:index="idx">
// 顯示紅色球號碼
<view wx:if="{{item.normal}}" class='view-normal'>
<text>{{ item.lottery_number }}</text>
</view>
<view wx:else class='view-special'>
// 顯示藍色球的號碼
<text>{{ item.lottery_number }}</text>
</view>
</block>
</view>
<block wx:if="{{is_fc_3d}}">
</block>
</view>
- 藍色球顯示的個數判斷
我這裡的判斷就比較簡陋了，主要的思路是：通過觀察開獎的結果進行判斷，有的獎類是要顯示兩個藍色球的，所以就標誌為顯示兩個藍球，有的是隻顯示為一個藍色球的，所以就標誌為一個藍色球，還有就是沒有藍色球的。
最後一點就是頁面佈局的樣式處理，這裡的 福彩3D 是顯示三個號碼的，居中顯示也是一個難點。我是將福彩的給它一個標記，是福彩則樣式居中。
第三部分 獎等級列表 的實現
這塊就比較簡單了，根據得到的列表資料，填充到頁面上即可，主要的程式碼如下：
<!-- 豎直方向排列的6個獎項 -->
<view class='view-lottery-awards'>
<!-- 水平的排列的獎項介紹 -->
<block wx:for="{{lotterys.lottery_prize}}" wx:for-item="item" wx:index="idx">
<view>
<text class='text-left'>{{ item.prize_name }}</text>
<text class='text-center'>{{ item.prize_num }} 注</text>
<text class='text-right'>{{ item.prize_amount }} 元</text>
</view>
</block>
</view>
第四部分 底部分享按鈕 的實現
這塊的難點主要是底部按鈕的樣式，其他沒啥的，主要的程式碼如下：
<!-- 水平的歷史開獎和分享給好友 -->
<view class='view-bottom'>
<view catchtap='onHistoryListClick' data-id='{{lotterys.lottery_id}}' data-name='{{lotterys.lottery_name}}'>
<!-- 歷史開獎 -->
<button class="btn-history-lottery" type='warn'>歷史開獎</button>
</view>
<view catchtap='onShareClick'>
<!-- 告訴好友 -->
<button class="btn-share-friend" type='warn' open-type='share'>告訴好友</button>
</view>
</view>
button 元件中 使用了 open-type='share' 使用者通過點選這個按鈕就可以直接創建出分享彈窗，使用者點選分享即可分享給好友。
分享彈窗.png
上面說到了難點是樣式的實現，這裡貼一下底部樣式的實現：
.view-bottom {
display: flex;
flex-direction: row;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 20rpx;
align-items: center;
}
.view-bottom view {
width: 100%;
margin: 0 20rpx;
height: 100rpx;
line-height: 100rpx;
color: #fff;
text-align: center;
}
.btn-history-lottery::after {
border: 0;
border-radius: 6rpx;
}
.btn-share-friend::after {
border: 0;
border-radius: 6rpx;
}
詳情頁面實現的介紹就到這裡了，有問題的歡迎一起交流。
歡迎老鐵掃碼體驗一波（目前掃碼出現可能是查快遞頁面，這是個人開發者繞過上線提交的頁面，12月份會改為查開獎頁面）
圖片