微信小程序收藏的店铺页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="wraper">
	<view class="storeList">
		<view class="storeImg">
			<image src="http://ojhq3mgil.bkt.clouddn.com/500/20161201/201612011335251362.jpg"></image>
		</view>
		<view class="storeInfo">
			<view class="storeName">小朋友店</view>
			<view class="storeStars"><image src="../../../images/icon_stars.png"></image></view>
			<view class="storeLabel">
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822325408.jpg"></image>
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822400505.jpg"></image>
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822482974.jpg"></image>
			</view>
		</view>
	</view>
	<view class="storeList">
		<view class="storeImg">
			<image src="http://ojhq3mgil.bkt.clouddn.com/500/20161201/201612011335251362.jpg"></image>
		</view>
		<view class="storeInfo">
			<view class="storeName">小朋友店</view>
			<view class="storeStars"><image src="../../../images/icon_stars.png"></image></view>
			<view class="storeLabel">
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822325408.jpg"></image>
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822400505.jpg"></image>
				<image src="http://ojhq3mgil.bkt.clouddn.com/admin/20161028/201610281822482974.jpg"></image>
			</view>
		</view>
	</view>
</view>

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

page{
	background: #fff;
}
.storeList{
	width: 100%;
	height: 200rpx;
	border-bottom: 1rpx solid #f3f3f3;
	background: url(../../../images/member_list_arrow.png) no-repeat 90% center;
	background-size: 50rpx 50rpx;
}
.storeList .storeImg{
	float: left;
	width: 160rpx;
	height: 160rpx;
	margin: 20rpx 30rpx 0 40rpx;
}
.storeList .storeImg image{
	width: 100%;
	height: 100%;
	border-radius:80rpx; 
}
.storeList .storeInfo{
	float: left;
	margin-top: 20rpx;
}
.storeList .storeInfo .storeStars{
	width: 40rpx;
	height: 40rpx;
	padding: 10rpx 0;
}
.storeList .storeInfo .storeStars image{
	width: 100%;
	height: 100%;
}
.storeList .storeInfo .storeLabel image{
	width: 80rpx;
	height: 35rpx;
}

三、js页面代码如下：

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

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