首页 > 小程序教程 > 微信小程序图片九宫格布局样式制作设计教程

微信小程序图片九宫格布局样式制作设计教程

上一篇 下一篇
今天给大家带来微信小程序图片九宫格布局样式制作设计教程,主要适合首页需要九宫格布局小程序页面,制作好以后效果图如下:

一、wxml页面代码如下:

<!--index.wxml-->
<view class="container">
  <view class="title">
    <image class="huace" src="../../src/huace.png" background-size="contain"></image>
  </view>
  <view class="items">
  	<view class="item" wx:key wx:for="{{list}}" bindtap="bindViewTap" data-id="{{item.id}}">
  		<image class="item-cover" src="{{item.pic_url}}" background-size="contain"></image>
  	</view>
  </view>
  <view>
  	<image class="copyright" src="../../src/copyright.png" background-size="contain"></image>
  </view>
</view>

二、wxss样式页面代码如下:
.item{
	width:33%;
	float:left;
	margin:30rpx 0 60rpx 0;
}
.item text{
	width:100%;
	display:block;
	text-align:center;
	font-size:28rpx;
}
.item image{
	width:180rpx;
	height:186rpx;
	display:block;
	margin:0 auto;
}
.huace{
	width:750rpx;
	height:118rpx;
	margin:0 auto;
}

三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    list: [],
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function(e) {
    var id = e.currentTarget.dataset.id;
    console.log(id);
    wx.navigateTo({
      url: '../scene/scene?id='+id
    })
  },
  getSceneLists:function(){
    var that = this;
    wx.request({
      url: "https://qcloud.bmy.com.cn/api/voices/classify",
      success: function(data){
        console.log(data.data);
        that.setData({
          list:data.data
        })
      },
      fail: function () {
        wx.showLoading({
          title: '数据加载错误,请刷新再试!'
        })
      }
    });
  },
  onLoad: function () {
    var that = this;
    this.getSceneLists();
    wx.showLoading({
      title: '加载中'
    })
  },
  onReady: function () {
    setTimeout(function () {
      wx.hideLoading();
    }, 500)

  }
})

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

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