全栈项目|小书架|微信小程序-首页水平轮播实现

首页效果

首页功能主要有

• 搜索（下篇文章介绍）
• 图书列表

图书列表

分析一波：

• 列表是水平滑动
• 点击列表会有按压效果：布局整体缩小
• 每个布局的信息从上到下排列分别是：图片、书名、作者、出版社
• 每个布局之间都有间隔

根据以上信息，在没有服务器接口的时候我们可以利用模拟数据将静态页面实现出来。

首先是水平滑动列表，这个可以使用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无感知登录的网络请求方案

以上，基本完成了首页展示。

---

咨询请加微信：轻撩即可。