首页 > 小程序教程 > 微信小程序书城三栏图书图片列表页面样式设计制作开发教程

微信小程序书城三栏图书图片列表页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序书城三栏图书图片列表页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--bookMall.wxml-->
<import src="mall/mall-template.wxml" />

<view class="container">
  <view class="header-container" catchtap="toBookList" data-categoryId="-1" data-categoryName="全部">
      <image class="header-img" src="/images/store/allBook_316x95_@2x.png" ></image> 
    <text class="header-title">全部图书</text> 
  </view>

  <view class="main-container">
    <block wx:for="{{categories}}">
      <view catchtap="toBookList" data-categoryId="{{index+1}}" data-categoryName="{{item.name}}">
            <template is="mall" data="{{...item}}"></template>
      </view>
    </block>
  </view>

</view>
 
二、wxss样式文件代码如下:
/* bookMall.wxss */
@import "mall/mall-template.wxss";

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0rpx;
  background-color: #fff;
}

.header-container {
  height: 200rpx;
  width: 94%;
  position: relative;
  margin-top: 20rpx;
}

.header-img {
  width: 100%;
  height: 100%;
}

.header-title {
  font-size: 40rpx;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 40%;
}

.main-container {
  display: flex;
  flex-direction: row;
  margin: 20rpx auto;
  justify-content: space-around;
  flex-wrap: wrap;
}
三、js页面代码如下:
// bookMall.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    categories: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    this.requestData();
  },
  requestData: function () {
    var that = this;
    wx.request({
      url: 'http://www.kindlepush.com/m/categorys',
      success: function (res) {
        console.log(res.data)
        var categories=[];
        for (var i = 1; i < res.data.length; i++){
          var category={};
          category["name"]=res.data[i].name;
          var imgUrl = "/images/store/"+i +"_112x112_@3x.png";
          category["imgUrl"]=imgUrl;
          categories.push(category);
        };
        // res.data.splice(0, 1);
        that.setData({
          categories: categories
        })
      },
      fail: function (err) {
        console.log(err);
      }
    });
  },
  toBookList: function(event){
    var categoryId = event.currentTarget.dataset.categoryid;
    var categoryName = event.currentTarget.dataset.categoryname;
    wx.navigateTo({
      url: '/pages/allBook/allBook?categoryId=' + categoryId + '&categoryName=' + categoryName,
    })

  },

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

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

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

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

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

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

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

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,310次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-28
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信图片 微信素材 自适应 企业网站 响应式 微信公众平台 微信文章 微信模板 html5
您可能会喜欢的其他模板