首页 > 小程序教程 > 微信小程序礼物类带幻灯及详细列表首页样式模板制作设计下载

微信小程序礼物类带幻灯及详细列表首页样式模板制作设计下载

上一篇 下一篇
今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/main/main.wxml-->
<view class="page">
	<view class="search">
		<input class="wx-input" placeholder="🔍 寻找称心礼物" placeholder-style="color: #bfbfbf; font-size: 30rpx; text-align:center;" />
	</view>

	<view class="banner">
		<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
		  <block wx:for="{{imgUrls}}">
		    <swiper-item bindtap="goDetail">
		      <image src="{{item}}" class="slide-image" />
		    </swiper-item>
		  </block>
		</swiper>
	</view>
	
	<view class="title-line">
		<view class="title-name">- BOUTIQUE RECOMMEND -</view>
		<view class="title-name-bottom">精选推荐</view>
	</view>
	
	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="title-line">
		<view class="title-name">- NEW TODAY -</view>
		<view class="title-name-bottom">今日上新</view>
	</view>

	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="title-line">
		<view class="title-name">- HOT NEW -</view>
		<view class="title-name-bottom">热卖新品</view>
	</view>

	<view class="content">
		<block wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}">
			<view class="content-cell">
				<image src="http://oalppxaqn.bkt.clouddn.com/%E8%BD%BB%E5%A5%A2%E7%A4%BC%E7%89%A9%E8%AF%B4.png" mode="scaleToFill" binderror="imageError"/>
				<text class="describe">照明台灯 钟表 小床</text>
				<view style="color: red; font-size: 8pt;" class="price-now">$ 120.00</view>
			</view>
		</block>
	</view>

	<view class="footer" bindtap="goIndexPage">北京合水商贸有限公司</view>
</view>
 
二、wxss样式文件代码如下:
/* pages/main/main.wxss */

.search {
	width: 100%;
	height: 60rpx;
	/*background-color: green;	*/
	display: flex;
	/*flex-flow: column nowrap;*/
	justify-content: center;/*子项横轴上居中对齐*/
	align-items: center;/*子项纵轴上居中对齐*/
	/*align-content: center;*/
}

.search .wx-input {
	width: 90%;
	height: 40rpx;
	border: 1px solid #bfbfbf;
	border-radius: 120rpx;
	/*margin: 30rpx 0 0 38rpx;*/
}

.banner {
	width: 100%;
	height: 420rpx;
	padding-top: 20rpx;
	/*margin-left: 15rpx;*/
}

.banner image {
	width: 750rpx;
	height: 420rpx;
}

.title-line {
	font-size: 8pt;
	color: #353535;
	text-align: center;
	/*margin-top: 20rpx;*/
}

.content {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.content-cell {
	width: 320rpx;
	height: 350rpx;
	margin-top: 50rpx;
	background-color: #ffffff;
	/*border-radius: 15px;*/
}

.content-cell image {
	/*border: 1px solid red;*/
	width: 320rpx;
	height: 250rpx;
}

.describe {
	color: #888888;
	font-size: 9pt;
	padding-left: 10rpx;
}

.price-now {
	padding: 12rpx 0 2rpx 200rpx;
}

.footer {
	color: #576b95;
	font-size: 6pt;
	text-align: center;
	margin-top: 30rpx;
	margin-bottom: 16rpx;
}


三、js页面代码如下:
// pages/main/main.js
Page({
  data:{
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  goIndexPage: function() {
    wx.navigateTo({
      url: '../index/index'
    });
  },
  imageError: function(event) {
    console.log(event.detail.errMsg);
  }
})

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

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