微信小程序坚果活动商品展示页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="wraper">
	<view bindtap="tosearch" class="banner">
		<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20170117/201701170958385307.jpg"></image>
	</view>
	<view class="productList">
		<view class="productImg">
			<image src="http://ojhq3mgil.bkt.clouddn.com/497/20160930/201609301336114101.jpg"></image>
		</view>
		<view class="productPrice">￥28.00</view>
		<view class="productName"> #现货速发#夏威夷果280g 特产坚果干果fsdfasdfdf</view>
	</view>
	<view class="productList">
		<view class="productImg">
			<image src="http://ojhq3mgil.bkt.clouddn.com/497/20160930/201609301336114101.jpg"></image>
		</view>
		<view class="productPrice">￥28.00</view>
		<view class="productName"> #现货速发#夏威夷果280g 特产坚果干果fsdfasdfdf</view>
	</view>
	<view class="productList">
		<view class="productImg">
			<image src="http://ojhq3mgil.bkt.clouddn.com/497/20160930/201609301336114101.jpg"></image>
		</view>
		<view class="productPrice">￥28.00</view>
		<view class="productName"> #现货速发#夏威夷果280g 特产坚果干果fsdfasdfdf</view>
	</view>
</view>

二、wxss样式文件代码如下：

page{
	background: #fff;
}
.banner{
	width: 100%;
	height: 300rpx;
}
.banner image{
	width: 100%;
	height: 100%;
}
.productList{
	width: 46%;
	height: 520rpx;
	border: 1rpx solid #f3f3f3;
	margin-top: 2.5%;
	margin-left: 2.5%;
	float: left;
}
.productList .productImg{
	width: 100%;
	height: 350rpx;
}
.productList .productImg image{
	width: 100%;
	height: 100%;
}
.productList .productPrice{
	color: #f12035;
	line-height: 60rpx;
}
.productList .productName{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、js页面代码如下：

Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  tosearch:function(){
    wx.navigateTo({
        url: '../searchProduct/searchProduct'
      })
  }
})

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