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

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

上一篇 下一篇
本文给大家带来的是微信小程序少儿书籍图文推荐列表设计制作开发教程,制作好以后效果图如下:
一、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
  • 下载次数 19,901次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信文章 响应式 企业网站 自适应 微信公众平台 微信模板 html5 微信素材 单页式简历模板
您可能会喜欢的其他模板