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


1.项目结构

2.list 列表页

(1)数据(逻辑)

list.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!--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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* pages/list/list.wxss */
.page-header {
   display : flex;
   justify- content center ;
   border-bottom 1 rpx  solid  #ccc ;
}
.page-title {
   padding 20 rpx  40 rpx;
   color #999 ;
   font-size 38 rpx;
   text-align center ;
}
.page-body {
   display : flex;
   flex:  1 ;
   flex- direction : column;
}
.item {
   display : flex;
   padding 20 rpx  40 rpx;
   border-bottom 1 rpx  solid  #eee ;
   cursor pointer ;
}
.item .poster {
   width 128 rpx;
   height 128 rpx;
   margin-right 20 rpx;
}
.item .meta {
   flex:  1 ;
}
.item .meta .title,.item .meta .sub-title {
   display block ;
   margin-bottom 15 rpx;
}
.item .meta .title {
   font-size 32 rpx;
}
.item .meta .sub-title {
   font-size 22 rpx;
   color #c0c0c0 ;
}
.item .meta .artists {
   font-size 26 rpx;
   color #999 ;
}
.item .rating {
   font-size 28 rpx;
   font-weight bold ;
   color #f74c31 ;
}
.tips {
   font-size 28 rpx;
   text-align center ;
   padding 50 rpx;
   color #ccc ;
}
.tips image {
   width 40 rpx;
   height 40 rpx;
   margin-right 20 rpx;
}
.tips image,.tips text {
   vertical-align middle ;
}

(4)效果图

3.item 详情页

(1)数据(逻辑)

item.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* pages/item/item.wxss */
.meta {
   display : flex;
   flex- direction : column;
   align-items:  center ;
   height 1000 rpx;
   padding 50 rpx  40 rpx;
}
.poster {
   width 80% ;
   height 80% ;
   margin 20 rpx;
}
.title {
   font-size 42 rpx;
   color #444 ;
}
.info {
   font-size 18 rpx;
   color #888 ;
   margin-top 20 rpx;
   width 80% ;
}
.summary {
   width 80% ;
   margin 30 rpx  auto ;
}
.label {
   display block ;
}
.content {
   color #666 ;
   font-size 20 rpx;
   padding 10 rpx;
}

(4)效果图

 
标签:  微信小程序
打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM