码迷,mamicode.com
                                                                              首页 > 微信 > 详细

                                                                              微信小程序 项目实战(三)list 列表页 及 item 详情页

                                                                              时间:2018-01-12 19:44:55      阅读:15180      评论:0      收藏:0      [点我收藏+]

                                                                              标签:加载   als   loading   console   实战   不同   拼接   function   rip   

                                                                              1.项目结构

                                                                              技术分享图片

                                                                              2.list 列表页

                                                                              (1)数据(逻辑)

                                                                              list.js

                                                                              // pages/list/list.js
                                                                              Page({
                                                                              
                                                                                /**
                                                                                 * 页面的初始数据
                                                                                 */
                                                                                data: {
                                                                                  title: ‘加载中...‘, // 状态
                                                                                  list: [], // 数据列表
                                                                                  type: ‘‘, // 数据类型
                                                                                  loading: true // 显示等待框
                                                                                },
                                                                              
                                                                                /**
                                                                                 * 生命周期函数--监听页面加载
                                                                                 */
                                                                                onLoad: function (options) { // options 为 board页传来的参数
                                                                                  const _this = this;
                                                                                  // 拼接请求url
                                                                                  const url = ‘https://api.douban.com/v2/movie/‘ + options.type;
                                                                                  // 请求数据
                                                                                  wx.request({
                                                                                    url: url,
                                                                                    data: {},
                                                                                    header: {
                                                                                      ‘content-type‘: ‘json‘ // 默认值
                                                                                    },
                                                                                    success: function(res) {
                                                                                      console.log(res.data);
                                                                                      // 赋值
                                                                                      _this.setData({
                                                                                        title: res.data.title,
                                                                                        list: res.data.subjects,
                                                                                        type: options.type,
                                                                                        loading: false // 关闭等待框
                                                                                      })
                                                                                    }
                                                                                  })
                                                                                }
                                                                              })

                                                                              (2)页面布局

                                                                              list.wxml

                                                                              <!--pages/list/list.wxml-->
                                                                              <!--列表页-->
                                                                              <view class=‘container‘>
                                                                                <!--等待框-->
                                                                                <loading hidden="{{!loading}}">加载中...</loading>
                                                                                <!--顶部标题栏-->
                                                                                <view class=‘page-header‘>
                                                                                  <text class=‘page-title‘>{{title}}</text>
                                                                                </view>
                                                                                <!--列表-->
                                                                                <view class=‘page-body‘ wx:for="{{list}}" wx:key="id">
                                                                                  <!--类型判断,显示不同的数据-->
                                                                                  <block wx:if="{{type === ‘us_box‘}}">
                                                                                    <navigator url=‘../item/item?id={{item.subject.id}}‘>
                                                                                      <view class=‘item‘>
                                                                                        <image class=‘poster‘ src=‘{{item.subject.images.small}}‘></image>
                                                                                        <view class=‘meta‘>
                                                                                          <text class=‘title‘>{{item.subject.title}}</text>
                                                                                          <text class=‘sub-title‘>{{item.subject.original_title}}({{item.subject.year}})</text>
                                                                                          <view class=‘artists‘>
                                                                                            <text>导演:</text>
                                                                                            <text wx:for="{{item.subject.directors}}" wx:key="id">{{item.name}}</text>
                                                                                          </view>
                                                                                          <view class=‘rating‘>
                                                                                            <text>{{item.subject.rating.average}}</text>
                                                                                          </view>
                                                                                        </view>
                                                                                      </view>
                                                                                    </navigator>
                                                                                  </block>
                                                                                  <!--另一种情况-->
                                                                                  <block wx:else>
                                                                                    <navigator url=‘../item/item?id={{ item.id }}‘>
                                                                                      <view class=‘item‘>
                                                                                        <image class=‘poster‘ src=‘{{item.images.small}}‘></image>
                                                                                        <view class=‘meta‘>
                                                                                          <text class=‘title‘>{{item.title}}</text>
                                                                                          <text class=‘sub-title‘>{{item.original_title}}({{item.year}})</text>
                                                                                          <view class=‘artists‘>
                                                                                           <text>导演:</text>
                                                                                           <text wx:for="{{item.directors}}" wx:key="id">{{item.name}}</text>
                                                                                          </view>
                                                                                          <view class=‘rating‘>
                                                                                            <text>{{item.rating.average}}</text>
                                                                                          </view>
                                                                                        </view>
                                                                                      </view>
                                                                                    </navigator>
                                                                                  </block>
                                                                                </view>
                                                                              </view>

                                                                              (3)样式

                                                                              list.wxss

                                                                              /* pages/list/list.wxss */
                                                                              .page-header {
                                                                                display: flex;
                                                                                justify-content: center;
                                                                                border-bottom: 1rpx solid #ccc;
                                                                              }
                                                                              .page-title {
                                                                                padding: 20rpx 40rpx;
                                                                                color: #999;
                                                                                font-size: 38rpx;
                                                                                text-align: center;
                                                                              }
                                                                              .page-body {
                                                                                display: flex;
                                                                                flex: 1;
                                                                                flex-direction: column;
                                                                              }
                                                                              .item {
                                                                                display: flex;
                                                                                padding: 20rpx 40rpx;
                                                                                border-bottom: 1rpx solid #eee;
                                                                                cursor: pointer;
                                                                              }
                                                                              .item .poster {
                                                                                width: 128rpx;
                                                                                height: 128rpx;
                                                                                margin-right: 20rpx;
                                                                              }
                                                                              .item .meta {
                                                                                flex: 1;
                                                                              }
                                                                              .item .meta .title,.item .meta .sub-title {
                                                                                display: block;
                                                                                margin-bottom: 15rpx;
                                                                              }
                                                                              .item .meta .title {
                                                                                font-size: 32rpx;
                                                                              }
                                                                              .item .meta .sub-title {
                                                                                font-size: 22rpx;
                                                                                color: #c0c0c0;
                                                                              }
                                                                              .item .meta .artists {
                                                                                font-size: 26rpx;
                                                                                color: #999;
                                                                              }
                                                                              .item .rating {
                                                                                font-size: 28rpx;
                                                                                font-weight: bold;
                                                                                color: #f74c31;
                                                                              }
                                                                              .tips {
                                                                                font-size: 28rpx;
                                                                                text-align: center;
                                                                                padding: 50rpx;
                                                                                color: #ccc;
                                                                              }
                                                                              .tips image {
                                                                                width: 40rpx;
                                                                                height: 40rpx;
                                                                                margin-right: 20rpx;
                                                                              }
                                                                              .tips image,.tips text {
                                                                                vertical-align: middle;
                                                                              }

                                                                              (4)效果图

                                                                              技术分享图片

                                                                              3.item 详情页

                                                                              (1)数据(逻辑)

                                                                              item.js

                                                                              // pages/item/item.js
                                                                              Page({
                                                                              
                                                                                /**
                                                                                 * 页面的初始数据
                                                                                 */
                                                                                data: {
                                                                                  title: ‘‘,
                                                                                  loading: true,
                                                                                  movie: {}
                                                                                },
                                                                              
                                                                                /**
                                                                                 * 生命周期函数--监听页面加载
                                                                                 */
                                                                                onLoad: function (options) {
                                                                                  const _this = this;
                                                                                  // 拼接请求url
                                                                                  const url = ‘https://api.douban.com/v2/movie/subject/‘ + options.id;
                                                                                  // 请求数据
                                                                                  wx.request({
                                                                                    url: url,
                                                                                    data: {},
                                                                                    header: {
                                                                                      ‘content-type‘: ‘json‘ // 默认值
                                                                                    },
                                                                                    success:function(res) {
                                                                                      // 赋值
                                                                                      _this.setData({
                                                                                        movie: res.data,
                                                                                        loading: false // 隐藏等待框
                                                                                      })
                                                                                    }
                                                                                  })
                                                                                },
                                                                              
                                                                                /**
                                                                                 * 生命周期函数--监听页面初次渲染完成
                                                                                 */
                                                                                onReady: function () {
                                                                                  // 修改导航栏标题
                                                                                  wx.setNavigationBarTitle({
                                                                                    title: this.data.title + ‘<<电影<<豆瓣‘
                                                                                  })
                                                                                }
                                                                              })

                                                                              (2)页面布局

                                                                              item.wxml

                                                                              <!--pages/item/item.wxml-->
                                                                              <!--详情页-->
                                                                              <!--等待框-->
                                                                              <loading hidden="{{!loading}}">加载中...</loading>
                                                                              <!--滚动列表-->
                                                                              <scroll-view scroll-y="true" wx:if="{{movie.title}}">
                                                                                <view class=‘meta‘>
                                                                                  <image class=‘poster‘ src=‘{{movie.images.large}}‘ background-size="cover"></image>
                                                                                  <text class=‘title‘>{{movie.title}}({{movie.year}})</text>
                                                                                  <text class=‘info‘>评分:{{movie.rating.average}}</text>
                                                                                  <text class=‘info‘>导演:<block wx:for="{{movie.directors}}" wx:key="id">{{item.name}}</block></text>
                                                                                  <text class=‘info‘>主演:<block wx:for="{{movie.casts}}" wx:key="id">{{item.name}}</block></text>
                                                                                </view>
                                                                                <view class=‘summary‘>
                                                                                  <text class=‘label‘>摘要:</text>
                                                                                  <text class=‘content‘>{{movie.summary}}</text>
                                                                                </view>
                                                                              </scroll-view>

                                                                              (3)样式

                                                                              item.wxss

                                                                              /* pages/item/item.wxss */
                                                                              .meta {
                                                                                display: flex;
                                                                                flex-direction: column;
                                                                                align-items: center;
                                                                                height: 1000rpx;
                                                                                padding: 50rpx 40rpx;
                                                                              }
                                                                              .poster {
                                                                                width: 80%;
                                                                                height: 80%;
                                                                                margin: 20rpx;
                                                                              }
                                                                              .title {
                                                                                font-size: 42rpx;
                                                                                color: #444;
                                                                              }
                                                                              .info {
                                                                                font-size: 18rpx;
                                                                                color: #888;
                                                                                margin-top: 20rpx;
                                                                                width: 80%;
                                                                              }
                                                                              .summary {
                                                                                width: 80%;
                                                                                margin: 30rpx auto;
                                                                              }
                                                                              .label {
                                                                                display: block;
                                                                              }
                                                                              .content {
                                                                                color: #666;
                                                                                font-size: 20rpx;
                                                                                padding: 10rpx;
                                                                              }

                                                                              (4)效果图

                                                                              技术分享图片

                                                                              微信小程序 项目实战(三)list 列表页 及 item 详情页

                                                                              标签:加载   als   loading   console   实战   不同   拼接   function   rip   

                                                                              原文地址:https://www.cnblogs.com/crazycode2/p/8274645.html

                                                                              (0)
                                                                              (5)
                                                                                 
                                                                              举报
                                                                              评论 一句话评论(0
                                                                              0条  
                                                                              登录后才能评论!
                                                                              ? 2014 mamicode.com 版权所有 京ICP备13008772号-2
                                                                              迷上了代码!
                                                                              宁夏11选5开奖查询

                                                                                                                                                                                                                                      沙尔克04的前锋 天涯明月刀手游内测 vs德黑兰独立 浮冰流电子游戏 ac米兰斯帕尔 欢乐球吃球为什么下载不了 海底捞鱼皮啥牌子 哈德斯菲尔德大学在英国哪里 欢乐生肖 淑女派对在线客服 桑普多利亚球队荣誉 ios刀塔自走棋 法国第戎图片 堡垒之夜在哪个平台下载 棉农塔什干对吉达阿赫利预测 乌迪内斯俱乐部