Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现

Android 开发者从0到1发布一个微信小程序的采坑过程——首页实现
Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现
Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面
Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面

需要代码可在文末扫码识别二维码，在我的----关于我—可找到我的联系方式。

实现的效果如下：

Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现_第1张图片

分析实现过程:

上面的截图从四个部分分析了该页面的实现：

第一部分是导航栏的名字
第二部分是开奖结果，也是这里实现的难点
第三部分是下方的奖项列表
第四部分是底部的分享和历史开奖按钮

第一部分导航栏的实现

这块没啥说的就是页面跳转的同时将名称传递过来，然后在这边接受后显示。

官方文档—事件

首页跳转详情页：

在首页 wxml 中定义点击捕捉事件

catchtap=“onLotteryTap” ：定义点击事件
data-name="{{lottery_name}}" ：定义传递过去的数据名称和值

在首页 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

页面的显示

                              // 显示红色球号码                  {{ item.lottery_number }}                          // 显示蓝色球的号码          {{ item.lottery_number }}

蓝色球显示的个数判断

我这里的判断就比较简陋了，主要的思路是：通过观察开奖的结果进行判断，有的奖类是要显示两个蓝色球的，所以就标志为显示两个蓝球，有的是只显示为一个蓝色球的，所以就标志为一个蓝色球，还有就是没有蓝色球的。

最后一点就是页面布局的样式处理，这里的福彩3D 是显示三个号码的，居中显示也是一个难点。我是将福彩的给它一个标记，是福彩则样式居中。

第三部分奖等级列表的实现

这块就比较简单了，根据得到的列表数据，填充到页面上即可，主要的代码如下：

                         {{ item.prize_name }}        {{ item.prize_num }} 注        {{ item.prize_amount }} 元

第四部分底部分享按钮的实现

这块的难点主要是底部按钮的样式，其他没啥的，主要的代码如下：

button 组件中使用了 open-type=‘share’ 用户通过点击这个按钮就可以直接创建出分享弹窗，用户点击分享即可分享给好友。
Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现_第2张图片

上面说到了难点是样式的实现，这里贴一下底部样式的实现：

.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月份会改为查开奖页面）

Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现_第3张图片

实现的效果如下：

分析实现过程:

第一部分导航栏的实现

第二部分开奖号码的实现

第三部分奖等级列表的实现

第四部分底部分享按钮的实现

更多相关文章

随机推荐

Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现

实现的效果如下：

分析实现过程:

第一部分 导航栏 的实现

第二部分 开奖号码 的实现

第三部分 奖等级列表 的实现

第四部分 底部分享按钮 的实现

更多相关文章

随机推荐

第一部分导航栏的实现

第二部分开奖号码的实现

第三部分奖等级列表的实现

第四部分底部分享按钮的实现