![](https://csdnimg.cn/release/download_crawler_static/88180656/bg3.jpg)
app.json
app.wxss
应用的主调色参考了豆瓣 app 的色调,采用了偏绿色。
首页
首页顶部展示搜索输入框,用户输入图书名称,点击搜索按钮,展示图书列表。
图书可能会很多,不能一下子全部展示,需要用到分页,app 上最常见的列表分
页就是上拉加载模式,根据小程序提供的组件中,找到了一个比较符合场景的
scroll-view 组件,这个组件有一个上拉到底部自动触发的 bindscrolltolower
事件。
先制作出界面的静态效果,之后再整合 API,由于本人对界面设计不敏感,所以
随便弄了一个粗糙的布局,看得过去就行了,嘿嘿~~
index.wxml
<view class="search-container">
<input type="text" placeholder="输入书名搜索"></input><icon
type="search" size="20"/>
</view>
<scroll-view scroll-y="true"
style="width:100%;position:relative;top:40px;height:200px">
<view style="text-align:center;padding-top:50rpx;">
<icon type="cancel" color="red" size="40" />
<view><text>没有找到相关图书</text></view>
</view>
<view style="text-align:center;padding-top:50rpx;">
<icon type="search" size="60" />
<view><text>豆瓣图书</text></view>
</view>
<view class="header">
<text>图书 10 本图书</text>
</view>
<view class="common-list">
<view class="list-item">
<view class="index-list-item">