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