最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】小程序实现绘本查询的详情页

查询 crifan 3490浏览 0评论
折腾:
【记录】Mac中去用小程序实现绘本查询系统的前端
后,接着就是开始去实现小程序的前端了:
去用小程序实现这种效果:
期间:
【整理】微信小程序工具调试UI界面时的坑
需要再去实现:
感觉要去搞清楚:
小程序 list布局
突然发现好像不用,单独加上每一个view即可。
小程序 list listview
列表渲染 · 小程序
里面提到了block
组件 · 小程序
没找到block
算了,还是试试手动写view吧
目前用:
detail.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!--pages/detail.wxml-->
<!-- <scroll-view scroll-y class='book_detail_root'> -->
<view class='book_detail_root'>
 
  <view class='detail_info'>
    <!-- <text>bookId: {{curBookId}}</text> -->
    <view class='detail_cover'>
      <image
        class='detail_cover_image'
        src="{{curBookInfo.coverImgUrl}}"
      ></image>
    </view>
    <text class='detail_title'>{{curBookInfo.title}}</text>
 
    <view class='detail_items'>
      <view class='detail_item_row'>
        <label class='detail_item_key'>作者: </label>
        <text class='detail_item_value'>{{curBookInfo.authorsStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>插画师: </label>
        <text class='detail_item_value'>{{curBookInfo.illustratorsStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>系列: </label>
        <text class='detail_item_value'>{{curBookInfo.seriesNameAndNumber}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>兰斯指数: </label>
        <text class='detail_item_value'>{{curBookInfo.lexileStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>xxx等级: </label>
        <text class='detail_item_value'>{{curBookInfo.xxxStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>参考年龄: </label>
        <text class='detail_item_value'>{{curBookInfo.ageStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>题材: </label>
        <text class='detail_item_value'>{{curBookInfo.genreStr}}</text>
      </view>
      <view class='detail_item_row'>
        <label class='detail_item_key'>页数: </label>
        <text class='detail_item_value'>{{curBookInfo.pagesStr}}</text>
      </view>
 
      <view class='detail_item_tags'>
        <view
          wx:for="{{curBookInfo.tags}}"
          wx:for-index="tagIdx"
          wx:for-item="eachTag"
          wx:key="*this"
 
          class='detail_single_tag'
        >
          <text class='detail_item_tags_value'>{{eachTag}}</text>
        </view>  
      </view>
 
      <view class='detail_item_intro'>
        <label class='detail_item_key detail_intro_key'>简介: </label>
        <view class='detail_intro_value'>{{curBookInfo.descriptionStr}}</view>
      </view>
 
    </view>
 
  </view>
 
  <view class='detail_recommend_list'>
    <!-- <text>bookId: {{curBookId}}</text> -->
  </view>
 
</view>
<!-- </scroll-view> -->
detail.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* pages/detail.wxss */
.book_detail_root{
  display: flex;
  padding-top: 20px;
}
 
.detail_info{
  width: 100%;
 
  background-color: rgb(239, 250, 247);
  border-radius: 16px;
 
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 30px;
}
 
.detail_cover{
  padding-top: 15px;
  padding-bottom: 15px;
 
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}
 
.detail_cover_image{
  width: 140px;
  height: 190px;
  border-radius: 8px;
}
 
.detail_title{
  display: flex;
  align-items: center;
  justify-content: center;
 
  font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  font-size: 18px;
  color: #333333;
  padding-bottom: 25px;
  margin-block-end: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
 
.detail_items{
  margin-bottom: 0;
}
 
.detail_item_row{
  min-height: 30px;
  max-height: 30px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgb(221, 221, 221);
}
 
.detail_item_key{
  font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  font-size: 14px;
  color: rgb(102, 102, 102);
  display: inline-block;
  width: 101px;
}
 
.detail_item_value{
  font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  font-size: 14px;
  color: rgb(51, 51, 51);
}
 
 
.detail_item_tags{
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
 
.detail_single_tag{
  font-size: 12px;
  font-weight: 400;
  margin-right: 4px;
  padding-top: 1px;
  padding-bottom: 0;
 
  background-color: rgba(97, 210, 179, 0.8);
  color: rgba(255, 255, 255, 0.9);
  height: 15px;
  line-height: 14px;
 
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
 
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}
 
.detail_item_tags_value{
 
}
 
.detail_item_intro{
  margin-left: 20px;
  margin-right: 20px;
}
 
.detail_intro_key{
  margin-bottom: 4px;
}
 
.detail_intro_value{
  font-size: 12px;
 
  font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
  color: rgb(51, 51, 51);
 
  /* margin-bottom: 2px; */
  margin-bottom: 20px;
}
 
.detail_recommend_list{
 
}
可以显示出基本的字段信息了:
然后再去弄显示下面的列表:
【已解决】小程序中如何提取公共部分内容为可复用的组件

转载请注明:在路上 » 【记录】小程序实现绘本查询的详情页

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.182 seconds, using 22.23MB memory