微信小程序我的书刊作品个人中心页设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序我的书刊作品个人中心页设计制作开发教程

微信小程序我的书刊作品个人中心页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序我的书刊作品个人中心页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--myworks.wxml-->
<view class="wrapper">
    <view class="head">
        <image class="avatar" mode="aspectFill" src="../../images/cover.jpg"></image>
    </view>
    <view class="tab-bar">
        <view catchtap="changeTab" data-tabid="1" class="{{actType == 1 ? 'active':'no-active'}}">原创 ({{totalBookCnt}})</view>
        <view catchtap="changeTab" data-tabid="2" class="{{actType == 2 ? 'active':'no-active'}}">朗读 ({{totalReadingCnt}})</view>
    </view>
    <view class="container">
            <!--原创书籍 S-->
            <block wx:if="{{ actType == 1}}">
                <view class="readbook-item" wx:for="{{bookList}}" catchtap="previewReadBook" data-bookinfo="{{item}}">
                    <view class="readbook-cover">
                        <image mode="aspectFill" src="{{item.coverUrl}}"></image>
                        <view class="title">{{item.title}}</view>
                        <view class="author">{{item.author}}</view>
                    </view>
                    <view class="nav-info">
                        <view class="item-icon">
                            <image mode="aspectFit" src="../../images/icon/read_icon@3x.png"></image> {{item.pvCnt}}
                        </view>
                        <view class="item-icon">
                            <image wx:if="{{item.hasLiked == 0}}" mode="aspectFit" src="../../images/icon/thumb_up_default_icon@3x.png"></image>
                            <image wx:if="{{item.hasLiked == 1}}" mode="aspectFit" src="../../images/icon/thumb_up_selected@3x.png"></image>
                            {{item.likeCnt}}
                        </view>
                        <view class="item-icon">
                            <image mode="aspectFit" src="../../images/icon/content_icon@3x.png"></image> {{item.commentCnt}}
                        </view>
                    </view>
                </view>
            </block>
            <!--原创书籍 E-->

            <!--朗读书籍 S-->
            <block wx:if="{{ actType == 2}}">
                <view class="item" wx:for="{{readList}}" catchtap="previewListenBook" data-bookinfo="{{item}}">
                    <view class="book-cover-wrapper">
                        <view class="book-cover-wp">
                            <image mode="aspectFill" src="{{item.coverUrl}}"></image>
                            <view class="book-cover">
                                <image mode="aspectFill" src="{{item.coverUrl}}"></image>
                            </view>
                            <view class="cover-side"></view>
                            <view class="cover-circle">
                                <image src="{{item.coverUrl}}"></image>
                            </view>
                        </view>
                        <view class="title">{{item.title}}</view>
                        <view class="author">{{item.author}}</view>
                    </view>
                    <view class="nav-info">
                        <view class="item-icon">
                            <image mode="aspectFit" src="../../images/icon/play_icon@3x.png"></image> {{item.pvCnt}}
                        </view>
                        <view class="item-icon">
                            <image wx:if="{{item.hasLiked == 0}}" mode="aspectFit" src="../../images/icon/thumb_up_default_icon@3x.png"></image>
                            <image wx:if="{{item.hasLiked == 1}}" mode="aspectFit" src="../../images/icon/thumb_up_selected@3x.png"></image>
                            {{item.likeCnt}}
                        </view>
                        <view class="item-icon">
                            <image mode="aspectFit" src="../../images/icon/content_icon@3x.png"></image> {{item.commentCnt}}
                        </view>
                    </view>
                </view>
            </block>
            <!--朗读书籍 E-->
    </view>
</view>
 
二、wxss样式文件代码如下：
/* myworks.wxss */
page{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.wrapper{
    position: relative;
}

.head{
    height: 220rpx;
    text-align: center
}
.head .avatar{
    width: 140rpx;
    height: 140rpx;
    margin-top: 70rpx;
    border: 4rpx solid rgba(244, 245, 247, 0.7);
    border-radius: 100%;
}

.tab-bar{
    display: flex;
    height: 100rpx;
    line-height: 100rpx;
}

.tab-bar view{
    flex: 1;
    text-align: center;
}

.tab-bar .active{
    color: #3acebb;
    border-bottom: 2rpx solid #3acebb;
}

/*书列表*/
.container .scroll{
  padding-top: 120rpx;
}

/*原创书籍*/
.readbook-item{
    display:inline-block;
    width: 335rpx;
    margin: 30rpx 20rpx;
}

.readbook-cover{
    padding: 12rpx;
    height: 430rpx;
    box-shadow:0 0 30rpx rgba(221,221,221,0.8);
}

.readbook-cover image{
    width: 310rpx;
    height: 310rpx;
    overflow: hidden;
}

.readbook-cover .title, .readbook-cover .author{
    text-align: center;
}

/*朗读作品*/
.item{
    display:inline-block;
    width: 335rpx;
    height: 450rpx;
    margin: 30rpx 20rpx;
}

.item .nav-info{
    margin: 0;
}

.book-cover-wrapper{
    height: 400rpx;
}

.book-cover-wp{
    position: relative;
    height: 286rpx;
    border: 2rpx solid #bebdbd;
}
.book-cover-wp > image{
    width: 335rpx;
    height: 286rpx;
    filter: blur(10rpx);
    /*opacity:0.4;
    filter:alpha(opacity=40);*/
}

.book-cover{
    position: absolute;
    top: 15rpx;
    right: 20rpx;
    height: 258rpx;
    width: 258rpx;
    border: 2rpx solid #fff;
    border-radius: 100%;
    overflow: hidden;
}

.book-cover > image{
    height: 258rpx;
    width: 258rpx;
}

.cover-side{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25rpx;
    border-right: 1rpx solid rgb(33, 33, 33);
    background: #808080;
    background: -moz-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0));
    background: -webkit-linear-gradient(bottom, rgba(67, 67, 67, 0.5), rgba(70, 67, 67, 1.0));
}

.cover-circle{
    position: absolute;
    top: 123rpx;
    right: 133rpx;
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #fff;
    overflow: hidden;
    border-radius: 100%;
    /*background: rgba(255, 255, 255, 0.3);*/
}

.cover-circle > image{
    width: 36rpx;
    height: 36rpx;
    filter: blur(10rpx);
}

.title{
    margin-top: 25rpx;
    font-size: 28rpx;
    color: #333333;
}

.author{
    margin-top: 10rpx;
    font-size: 22rpx;
    color: #666666;
}

.nav-info{
    display: flex;
    height: 30rpx;
    line-height: 30rpx;
    margin: 30rpx 0;
    text-align: center;
    font-size: 22rpx;
    color: #999999;
}

.nav-info .item-icon{
    flex: 1;
}

.nav-info .item-icon image{
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
}
三、js页面代码如下：
// myworks.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userId: '', // 用户U=uin
    bookList:{}, // 原创 1 列表
    readList: {}, // 朗读 2 列表
    totalBookCnt: '', // 绘本总数
    totalReadingCnt: '', // 朗读书总数
    actType: 1, // 活动TAB  actType 1 原创  2 朗读
    emptyBook: false, // 是否没书
    pageNum: 1,
    listLoading: false, //"上拉加载"的变量，默认false，隐藏 
    listLoadingComplete: false,  //“没有数据”的变量，默认false，隐藏 
    isListLoading: false // 正在加载数据，停止请求
      
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    // 获取用户ID
    let userId = getApp().getUserId();
    if ( userId ){
      that.setData({
        userId: userId
      });
    }

    // 获取用户作品
    getApp().getMyWorks(that.data.actType, that.data.pageNum, function (data) {
      console.log(data);
      if (data.code == 0) {
        if (that.data.actType == 1){
          that.setData({
            bookList: data.payload.works,
            totalBookCnt: data.payload.totalBookCnt,
            totalReadingCnt: data.payload.totalReadingCnt,
          });
        } else if (that.data.actType == 2){
          that.setData({
            readList: data.payload.works,
            totalBookCnt: data.payload.totalBookCnt,
            totalReadingCnt: data.payload.totalReadingCnt,
          });
        }

      } else {
        console.log("error_code:" + data.msg);
      }
    });
  },

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

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

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

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function (e) {
    let that = this;
    wx.showNavigationBarLoading(); //在标题栏中显示加载
    getApp().getMyWorks(that.data.actType, 1, function (data) {
      wx.stopPullDownRefresh();
      wx.hideNavigationBarLoading();
      console.log(data);
      if (data.code == 0) {
        if (that.data.actType == 1) {
          that.setData({
            bookList: data.payload.works,
            totalBookCnt: data.payload.totalBookCnt,
            totalReadingCnt: data.payload.totalReadingCnt,
          });
        } else if (that.data.actType == 2) {
          that.setData({
            readList: data.payload.works,
            totalBookCnt: data.payload.totalBookCnt,
            totalReadingCnt: data.payload.totalReadingCnt,
          });
        }

      } else {
        console.log("error_code:" + data.msg);
      }
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showNavigationBarLoading(); //在标题栏中显示加载
    let that = this;
    that.fetchBookList();
    // 隐藏加载信息
    wx.hideNavigationBarLoading();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },

  // 切换TAB
  changeTab: function(event){
    console.log(event.currentTarget.dataset.tabid);
    let that = this;
    if (event.currentTarget.dataset.tabid == 1 && !that.data.bookList){
      that.fetchBookList();
    } else if (event.currentTarget.dataset.tabid == 2 && !that.data.readList) {
      that.fetchBookList();
    }
    that.setData({
      actType: event.currentTarget.dataset.tabid
    });
  },

  // 请求数据添加在页面
  fetchBookList: function () {
    let that = this;

    //访问网络
    getApp().getMyWorks(that.data.actType, that.data.pageNum, function (data) {
      if (data.code == 0) {
        console.log(data);

        if(data.payload.bookList.length > 0){
          let newBookList = [];
          //从原来的数据继续添加
          if (that.data.actType == 1) {
            newBookList = that.data.bookList.concat(data.payload.bookList);
            that.setData({
              bookList: data.payload.works,
              totalBookCnt: data.payload.totalBookCnt,
              totalReadingCnt: data.payload.totalReadingCnt,
            });
          } else if (that.data.actType == 2) {
            newBookList = that.data.readList.concat(data.payload.bookList);
            that.setData({
              readList: data.payload.works,
              totalBookCnt: data.payload.totalBookCnt,
              totalReadingCnt: data.payload.totalReadingCnt,
            });
          }
        }
      } else {
        console.log("error_code:" + data.msg);
      }
    });
  },

  // 跳转浏览（绘本）
  // reader 0 书本  1 朗读  
  previewReadBook: function(event){
    let that = this;
    let bookInfo = event.currentTarget.dataset.bookinfo;
    let isAuthor = 0; //1 false 0  true

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

  // 去听书 (朗读)
  previewListenBook: function(event){
    let that = this;
    let bookInfo = event.currentTarget.dataset.bookinfo;
    // reader 0 书本  1  朗读
    let isAuthor = 0; //1 false 0  true

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

})

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

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