微信小程序少儿书籍图文推荐列表设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序少儿书籍图文推荐列表设计制作开发教程

微信小程序少儿书籍图文推荐列表设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序少儿书籍图文推荐列表设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/index/index.wxml-->
<!-- 书城首页 -->
<view class="container">

  <view class="book-panel">
    <view class="panel-head">
      <text class="panel-head-title">为你推荐</text>
      <navigator class="panel-head-more" url="../setting/setting" >设置
        <image mode="aspectFit" src="/images/icon/install_icon@3x.png"></image>
      </navigator>
    </view>
    <view class="panel-body">
      <!-- 推荐图书 S -->
      <view wx:for="{{recommendBook}}" wx:if="{{index < 3}}" class="book-item" catchtap="previewReadBook" data-bookinfo="{{item}}">
        <view class="cover">
          <image mode="aspectFill" src="{{item.coverUrl}}"></image>
        </view>
        <view class="content">
          <view class="title">{{item.title}}</view>
          <view class="author">{{item.author}}</view>
          <view class="book-tag">
            <text class="tag-red tag">红色</text>
          </view>
        </view>
      </view>
      <!-- 推荐图书 E -->
    </view>
  </view>

  <view class="spacing"></view>

  <!-- 一个推荐栏目 S -->
  <view class="bookshelf-panel">
    <view class="panel-head">
      <text class="panel-head-title">童话故事</text>
      <view class="panel-head-more" catchtap="bookListPage" data-type="1">全部
        <image mode="aspectFit" src="/images/icon/right_arrow@3x.png"></image>
      </view>
    </view>
    <view class="panel-body">
      <scroll-view class="scroll-view_H" scroll-x="true">
        <!--推荐书 S-->
        <view class="bookshelf-item" wx:for="{{recommendBook}}" wx:for-item="book">
          <view catchtap="previewReadBook" data-bookinfo="{{book}}">
            <view class="item-cover">
              <image mode="aspectFill" src="{{book.coverUrl}}"></image>
              <!--<text class="item-tag">原创</text>-->
            </view>
            <view class="item-title">{{book.title}}</view>
          </view>
        </view>
        <!--推荐书 E-->
      </scroll-view>
    </view>
  </view>
  <!-- 一个推荐栏目 E -->

  <view class="spacing"></view>

  <!-- 一个推荐栏目 S -->
  <view class="bookshelf-panel">
    <view class="panel-head">
      <text class="panel-head-title">自然科学</text>
      <view class="panel-head-more" catchtap="bookListPage" data-type="1">全部
        <image mode="aspectFit" src="/images/icon/right_arrow@3x.png"></image>
      </view>
    </view>
    <view class="panel-body">
      <scroll-view class="scroll-view_H" scroll-x="true">
        <!--推荐书 S-->
        <view class="bookshelf-item" wx:for="{{recommendBook}}" wx:for-item="book">
          <view catchtap="previewReadBook" data-bookinfo="{{book}}">
            <view class="item-cover">
              <image mode="aspectFill" src="{{book.coverUrl}}"></image>
              <!--<text class="item-tag">原创</text>-->
            </view>
            <view class="item-title">{{book.title}}</view>
          </view>
        </view>
        <!--推荐书 E-->
      </scroll-view>
    </view>
  </view>
  <!-- 一个推荐栏目 E -->

  <view class="spacing"></view>

</view>
 
二、wxss样式文件代码如下：
/* pages/index/index.wxss */
page {
  color: #666;
  height: 100%;
  background: #fff;
  
}
/* 书城首页 */
.container {
  padding-top: 20rpx;
  background: #eeeeee;
}

/* 推荐列表 */
.book-panel {
  padding: 0 24rpx;
  background: #fff;
}

.book-panel .panel-head {
  height: 96rpx;
  line-height: 96rpx;
  margin-bottom: 0;
  border-bottom: 1px solid #f4f4f4;
}

.book-panel .panel-head-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.book-panel .panel-head-more {
  float: right;
  font-size: 24rpx;
  color: #999;
}

.book-panel .panel-head-more image{
    width: 24rpx;
    height: 24rpx;
    vertical-align: middle;
}

/* 推荐书籍列表 */
.book-item{
  display: flex;
  padding: 30rpx 0;
  height: 212rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #eeeeee;
}
.book-panel .book-item:last-child{
  border-bottom: none;
}
.book-item .cover{
  width: 182rpx;
  margin-right: 32rpx;
  height: 212rpx;
  box-shadow: 0 0 10rpx rgba(221,221,221,0.8);
}

.book-item .cover image{
  width: 182rpx;
  height: 212rpx;
}

.book-item .content{
  flex: 1;
}

.title{
  height: 40rpx;
  line-height: 40rpx;
  font-size: 36rpx;
  color: #666;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow:hidden;
}

.author{
  margin-top: 30rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.book-tag{
  margin-top: 50rpx;
}

/* 推荐栏目 */
.bookshelf-panel {
  padding: 0 24rpx;
  background: #fff;
}

.bookshelf-panel .panel-head {
  height: 96rpx;
  line-height: 96rpx;
  margin-bottom: 0;
  border-bottom: 1px solid #f4f4f4;
}

.bookshelf-panel .panel-head-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.bookshelf-panel .panel-head-more {
  float: right;
  font-size: 24rpx;
  color: #999;
}

.bookshelf-panel .panel-head-more image{
    width: 24rpx;
    height: 24rpx;
    vertical-align: middle;
}

.bookshelf-panel .panel-body {
  padding: 20rpx 0;
}

/* 水平滚动 */

.bookshelf-panel .scroll-view_H {
  height: 320rpx;
  white-space: nowrap;
}

.bookshelf-panel .bookshelf-item {
  display: inline-block;
  width: 220rpx;
  vertical-align: top;
  margin-right: 20rpx;
}

.bookshelf-panel .bookshelf-item .item-cover {
  position: relative;
  width: 220rpx;
  height: 256rpx;
  border: 1rpx solid #f4f4f4;
  overflow: hidden;
  box-shadow: 0 0 10rpx rgba(221,221,221,0.8);
}

.bookshelf-panel .bookshelf-item .item-cover .item-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 200rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding-left: 20rpx;
  font-size: 24rpx;
  /*background: linear-gradient(left 0deg, #808080, #fff);*/
  background: #808080;
  /*background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(67, 67, 67, 0.5))); */
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(67, 67, 67, 0.5));
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(67, 67, 67, 0.5));
  color: #fff;
}

.bookshelf-panel .bookshelf-item .item-cover image {
  width: 220rpx;
  height: 256rpx;
}

.bookshelf-panel .bookshelf-item .item-title {
  padding-top: 15rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
三、js页面代码如下：
// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    recommendBook: [] // 推荐绘本列表
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    let that = this;
    let listType = 1;
    let pageNum = 1;
    
    getApp().getBookList(listType, pageNum, function (data) {
      if (data.code == 0) {
        that.setData({
          recommendBook: data.payload.bookList,
        });
      } else {
        console.log("error_code:" + data.msg);
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    return {
      title: '选书朗读',
      path: '/pages/index/index',
      success: function(res) {
        console.log('分享成功');
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  },

  // 跳转浏览
  previewReadBook: function(event){
    let that = this;
    console.log(event);
    let bookInfo = event.currentTarget.dataset.bookinfo;
    // 拉去评论书本类型 reader 0 书本  1 朗读  书城默认全部设置为 0
    let reader = 0; // reader 0 书本  1  朗读
    let isAuthor = 1; //1 false 0  true

    wx.navigateTo({
      url: '../previewreadbook/previewreadbook?bookId=' + bookInfo.bookId +
      '&title=' + bookInfo.title + 
      '&author=' + bookInfo.author + 
      '&coverUrl=' + bookInfo.coverUrl +
      '&isAuthor=' + isAuthor +
      '&reader= ' + reader +
      '&hasLiked= ' + bookInfo.hasLiked +
      '&pvCnt=' + bookInfo.pvCnt +
      '&likeCnt=' + bookInfo.likeCnt +
      '&commentCnt=' + bookInfo.commentCnt
    })
  },

  // 书城列表 listType
  bookListPage: function (event) {
    let listType = event.currentTarget.dataset.type;
    wx.navigateTo({
      url: '../../pages/booklist/booklist?type=' + listType
    })
  }

})

模板简介：该模板名称为【微信小程序少儿书籍图文推荐列表设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 20,053次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 html5 单页式简历模板 微信图片 企业网站 自适应 微信素材 响应式 微信公众平台 微信模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 650
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 740
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,975
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,326
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,812
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,556
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有