全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果
首页功能主要有
- 搜索(下篇文章介绍)
- 图书列表
图书列表
分析一波:
- 列表是水平滑动
- 点击列表会有按压效果:布局整体缩小
- 每个布局的信息从上到下排列分别是:图片、书名、作者、出版社
- 每个布局之间都有间隔
根据以上信息,在没有服务器接口的时候我们可以利用模拟数据将静态页面实现出来。
首先是水平滑动列表,这个可以使用swiper
组件实现,在使用swiper
组件的时候可以通过设置previous-margin
和next-margin
字段实现布局之间的间隔。
而按压效果可以通过CSS
效果实现,剩下的就是里面的图书信息了,图书信息可以封装成template
模块,或者直接在布局中实现。
具体的实现:
首页wxml
:布局上没啥难度的,不理解的字段查小程序官方组件 swiper 即可。
<view class="swiper-container">
<!-- loading -->
<block wx:if="{{showLoading}}">
<view class="donut-container">
<view class="donut"></view>
</view>
</block>
<!-- book swiper -->
<block wx:else>
<text class="searchText" catchtap="bindSearch">点击搜索</text>
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}"
class="swiper"
previous-margin="{{sideMargin}}"
next-margin="{{sideMargin}}"
>
<block wx:for="{{bookList}}" wx:key="index">
<swiper-item class="swiper-item">
<view
class="book-container bg-white"
hover-class="book-container-hover"
catchtap="goDetail"
data-id="{{item.bkid}}"
>
<view class="book-image">
<image src="{{item.bkcover}}" mode="scaleToFill"></image>
</view>
<view class="book-info">
<text class="book-name">{{item.bkname}}</text>
<text class="author">{{item.bkauthor}}</text>
<text class="publisher">{{item.bkpublisher}}</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</block>
</view>
首页wxss
:重点在wxss
文件上,这里就直接在源码里面介绍相关的属性。
/* 整个布局的样式 */
.swiper-container {
/*border: 1px solid red;*/
box-sizing: border-box;
padding: 120rpx 0 50rpx 0;
display: flex;
flex-direction: column;
/* 下面两个决定了居中样式 */
justify-content: center;
align-items: center;
}
/* 水平滑动组件样式 */
.swiper {
width: 750rpx;
height: 800rpx;
}
/* 水平滑动组件中 单个卡片的样式 */
.swiper-item {
/*border: 1px solid blue;*/
/* 宽高自动设为100% */
display: flex;
justify-content: center;
align-items: center;
}
/* 搜索样式 */
.searchText{
border: 1px solid #e6e6e6;
width: 480rpx;
height: 20rpx;
font-size: 18rpx;
color: #cdcdcd;
padding: 30rpx 20rpx;
display: flex;
flex-direction: column;
/* 各行之间留有空白的容器内:效果看下方的图片 */
justify-content: space-around;
align-items: center;
border-radius: 20rpx;
box-shadow: 0 0 10rpx #dbdbdb;
}
/* 书籍 */
.book-container {
border: 1px solid #e6e6e6;
width: 480rpx;
height: 720rpx;
padding: 30rpx 20rpx;
display: flex;
flex-direction: column;
/* 各行之间留有空白的容器内:效果看下方的图片 */
justify-content: space-around;
align-items: center;
border-radius: 20rpx;
box-shadow: 0 0 10rpx #dbdbdb;
}
/* 书籍按压效果 */
.book-container-hover {
transform: scale(0.96,0.96);
transition: all 1 ease 0;
}
/* 书籍图片样式 */
.book-image {
/*border: 1px solid #cdcdcd;*/
/*box-shadow: 0 0 10rpx #dcdcdc;*/
}
/* 书籍图片样式 */
.book-image > image {
width: 350rpx;
}
/* 书籍信息样式 */
.book-info {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
/*border: 1px solid black;*/
margin-top: 20rpx;
}
/* 书籍名字样式 */
.book-name {
color: #1e1e1e;
font-size: 35rpx;
margin-bottom: 8rpx;
}
/* 书籍作者样式 */
.author {
color: #8a8a8a;
font-size: 30rpx;
margin-bottom: 8rpx;
}
/* 书籍出版社样式 */
.publisher {
color: #cdcdcd;
font-size: 30rpx;
}
/* 加载中样式 */
.donut-container {
padding-top: 200rpx;
}
其中justify-content
的效果可在 这里查看 ,下面是justify-content:space-between
的效果。
首页js
文件:这里主要就是调用服务器接口,然后将数据传递给wxml
展示。
import {
BookModel
} from '../../models/book.js'
// 创建图书 model
const bookModel = new BookModel()
Page({
/**
* 页面的初始数据
*/
data: {
bookList: [], // 书籍列表数组
indicatorDots: false, // 是否显示轮播指示点
autoplay: false, // 是否自动播放轮播
interval: 5000, // 轮播间隔
duration: 1000, // 轮播播放延迟
circular: true, // 是否采用衔接滑动
sideMargin: '100rpx', // 幻灯片前后边距
showLoading: true // 是否显示loading态
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this;
// 获取图书列表网络请求
bookModel.getBookList()
.then(res => {
this.setData({
bookList: res,
showLoading: false
})
})
},
上面代码中使用了BookModel
,在BookModel
中主要处理了数据相关的操作:
import {
HTTP
}
from '../utils/http.js'
// 获取服务器接口地址
const api = require('../config/config.js');
class BookModel extends HTTP {
data = null
/**
* 获取所有书籍列表
*/
getBookList() {
return this.request({
url: api.getBooksUrl
})
}
/**
* 获取书籍详情
*/
getBookInfo(bkid) {
return this.requestNoAuth({
url: api.getBookInfo,
data: {
id: bkid
}
})
}
}
export {
BookModel
}
上面使用的http.js
文件可参考我之前的文章:微信小程序-携带Token无感知登录的网络请求方案
以上,基本完成了首页展示。
咨询请加微信:轻撩即可。
全栈项目|小书架|微信小程序-首页水平轮播实现的更多相关文章
- 全栈项目|小书架|微信小程序-登录及token鉴权
小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...
- 全栈项目|小书架|微信小程序-项目结构设计分包
前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 全栈项目|小书架|微信小程序-实现搜索功能
效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
- 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
- 全栈项目|小书架|微信小程序-书籍详情功能实现
效果图 实现分析 从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...
- 全栈项目|小书架|服务器开发-NodeJS 使用 JWT 实现登录认证
通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Toke ...
随机推荐
- Android入门教程(一)
Android是什么? Android是基于Linux开发性内核的操作系统,该平台由操作系统,中间件,用户界面和应用软件组成.Android的基本信息:软件类型,APK,发行商:Google,最早版本 ...
- PHP base_convert() 函数
16进制转8进制 <?php $hex = "E196"; echo base_convert($hex,,); ?> 8进制数转换为10进制数 <?php $o ...
- 谈下sublime和vscode
sublime用了好多年一直没有换掉 它的体积小运行启动快用着一直很顺手,而且也有不少的插件可以去安装, 而相对于vscode 开始觉得他启动慢有点笨重的感觉,可能是我电脑原因用着卡卡的所以一直没换成 ...
- 刷题记录:[CISCN2019 华北赛区 Day2 Web1]Hack World
目录 刷题记录:[CISCN2019 华北赛区 Day2 Web1]Hack World 一.前言 二.正文 1.解题过程 2.解题方法 刷题记录:[CISCN2019 华北赛区 Day2 Web1] ...
- 第09组 Alpha冲刺(4/4)
队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...
- uniapp - 关于ios调试
[ios调试] 1.一台windows电脑.一根apple数据线(一旦连接以后,apple设备就会自动识别itunes软件,如果没有安装会提示) 2.安装itunes (爱思助手) 3.官方教程:ht ...
- Python推荐一整套开发工具
原文:https://sourcery.ai/blog/python-best-practices/ 在开始一个新的Python项目时,很容易不做规划直接进入编码环节.花费少量时间,用最好的工具设置项 ...
- PostgreSQL中的pg_relation_filepath()函数
pg_relation_filepath()类似于pg_relation_filenode(),但它返回关系的整个文件路径名(相对于数据库集群的数据目录PGDATA). postgres=# sele ...
- date命令时间戳和时间之间的转换
这里是在mac下的操作,主要就是用date这个命令,更多的用法用man命令查看 字符串格式时间 TO 时间戳我们知道date 命令可以直接把当前时间转化为时间戳 # date +%s143678152 ...
- filebeat获取nginx的access日志配置
filebeat获取nginx的access日志配置 产生nginx日志的服务器即生产者服务器配置: 拿omp.chinasoft.com举例: .nginx.conf主配置文件添加日志格式 log_ ...