<!--index.wxml-->
<view class="container">
<!--顶部搜索-->
<view class="top_search">
<view class="logo">
<image src="../../images/icon_logo.png"></image>
</view>
<view class="search_inp">
<input placeholder="输入关键字搜索商品名" />
</view>
<view class="search_btn">
<image src="../../images/home_top_search@2x.png"></image>
</view>
</view>
<!--顶部搜索end-->
<!--顶部导航条-->
<view class="top_nav_wrap">
<scroll-view class="top_nav" scroll-x="true">
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
<view class="top_nav_item">推荐</view>
</scroll-view>
</view>
<!--顶部导航条end-->
<!--banner-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="banner">
<block wx:for="{{banner}}">
<swiper-item>
<navigator style="height:150px;" url="../shopIndex/index" hover-class="navigator-hover">
<image src="{{item.labelImg}}" class="slide-image" width="355" height="150" />
</navigator>
</swiper-item>
</block>
</swiper>
<!--banner end-->
<block wx:for="{{trunkLabelList}}">
<!--热门活动-->
<view class="hot_activity">
<view class="hot_activity_tit">
<image src="{{item.labelPre}}"></image>
</view>
<navigator class="activity_pic" url="../hotProduct/hotProduct" hover-class="navigator-hover">
<image src="{{item.labelImg}}"></image>
</navigator>
<!--活动下方滑块-->
<!-- <swiper class="activity_list">
<swiper-item>
<block wx:for="{{imgMsg}}">
<view class="activity_main">
<image src="{{item.imgUrl}}" class="slide-image" width="355" height="150" />
<text class="picDisc">{{item.picDisc}}</text>
</view>
</block>
</swiper-item>
<swiper-item>
<block wx:for="{{imgMsg}}">
<view class="activity_main">
<image src="{{item.imgUrl}}" class="slide-image" width="355" height="150" />
<text class="picDisc">{{item.picDisc}}</text>
</view>
</block>
</swiper-item>
</swiper> -->
<scroll-view class="activity_list" scroll-x="true" style=" white-space: nowrap; display: flex">
<block wx:for="{{item.leafList}}">
<view class="activity_main" style="display: inline-block">
<view>
<navigator url="../details/index" hover-class="navigator-hover">
<image src="{{item.productImg}}" class="slide-image"/>
</navigator>
</view>
<view class="picDisc">{{item.productName}}</view>
</view>
</block>
</scroll-view>
<!--活动下方滑块end-->
</view>
</block>
</view>
|
/**index.wxss**/
/*顶部搜索*/
.top_search{
display: flex;
height: 90rpx;
padding: 0 20rpx;
background-color: white;
}
.logo{
width: 80rpx;
}
.logo image{
width: 100%;
height: 100%;
}
.search_inp{
flex: 1;
background:red;
height:66rpx;
margin-top:12rpx;
background-color: #f3f3f3;
border-radius: 10rpx;
}
.search_inp input{
height: 100%;
text-align: center;
font-size: 30rpx;
}
.search_btn{
width: 80rpx;
}
.search_btn image{
width: 100%;
height: 100%;
}
/*top导航栏*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.top_nav_wrap{
background-color: white;
text-align: center;
margin: 10rpx auto;
}
.top_nav{
white-space: nowrap;
display: flex;
}
.top_nav_item{
width: 40px;
padding: 22rpx 20rpx;
margin-right: 5px;
display: inline-block;
}
/*banner*/
.banner{
margin-top: 10rpx;
}
.banner image{
width: 100%;
height:100%;
}
/*热门活动*/
.hot_activity{
margin-bottom: 20rpx;
}
.hot_activity_tit{
width: 100%;
height: 40px;
}
.hot_activity_tit image{
width: 100%;
height: 100%;
}
.activity_pic{
width: 100%;
height: 120px;
position: relative;
}
.activity_pic image{
width: 100%;
height: 100%;
}
.activity_pic::before{
position: absolute;
bottom: -1px;
width: 0;
height: 0;
left: 50%;
margin-left: -10px;
content: " ";
border-bottom: 10px solid #ffffff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/*热门活动下滑块*/
.activity_list{
height: 240rpx;
background-color: white;
}
.activity_main{
width: 25%;
height: 100%;
padding:0 5rpx;
}
.activity_main image{
width: 100%;
height: 160rpx;
}
.activity_list swiper-item{
display: flex;
}
.picDisc{
width: 100px;
color: #666666;
font-size: 30rpx;
text-overflow: ellipsis;
/*display: -webkit-box;*/
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
|
//index.js
//获取应用实例
var app = getApp()
// Page({
// data: {
// motto: 'Hello World',
// userInfo: {}
// },
// //事件处理函数
// bindViewTap: function() {
// wx.navigateTo({
// url: '../logs/logs'
// })
// },
// onLoad: function () {
// console.log('onLoad')
// var that = this
// //调用应用实例的方法获取全局数据
// app.getUserInfo(function(userInfo){
// //更新数据
// that.setData({
// userInfo:userInfo
// })
// })
// }
// })
Page({
data: {
imgMsg: [],
trunkLabelList:[],
banner:[],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},
onLoad: function () {
var that = this;
wx.request({
method:'POST',
url: "https://test.jlibom.com/home/queryLabel",
data: {
labelId:'00001',
page:1,
pageSize:10
},
success: function (result) {
console.log(result.data.data.trunkLabelList);
that.setData({
banner:result.data.data.titleLabelList,
trunkLabelList:result.data.data.trunkLabelList
})
}
});
}
})
|
模板简介：该模板名称为【微信小程序吉利宝简单的商城购物首页样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
