标签：box index name 微信 border 首页 电商 banner id
本文已同步发表个人博客网站 https://qiucode.cn/article/91
1、定义模块与设置头部
首先先在app.json文件中定义首页、分类、购物车以及我的四个模块。
背景颜色为白色，名称是秋码淘好货
"pages":[
"pages/index/index",
"pages/category/category",
"pages/cart/cart",
"pages/personal/personal"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "秋码淘好货",
"navigationBarTextStyle":"black"
},
2、滑块导航栏
编辑index.wxml和index.wxss这两个文件
index.wxml
<view class="page">
<!-- 搜索框 -->
<view class="search">
<view class="searchBar">
<icon class="weui-icon-search" type="search" size="14"></icon>
<input class="input" placeholder="大家都在搜" bindtap="entrySearch" disabled />
</view>
</view>
<!-- 导航栏 -->
<view class="navBar">
<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex ">
<view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{category}}"
wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}"
bindtap="navbarTap">{{item.name}}</view>
</scroll-view>
</view>
</view>
index.wxss
.page{
height:100%;
display:flex;
flex-direction:column;
box-sizing:border-box;
position:relative;
top:0;
left:0;
bottom:0;
right:0;
background-color:#f5f8fa;
}
.search{
background: #fff;
}
.searchBar{
margin: 20rpx 30rpx;
border-radius: 30px;
border:1px solid #f5f5f5;
background: #f5f5f5;
}
.weui-icon-search{
margin-left: 15rpx;
float: left;
}
.navBar{
height: 60rpx;
background: #fff;
border-top: 1px solid #fafafa;
}
.navBar-box{
width: 100%;
height: 60rpx;
}
.cate-list{
display: inline;
margin: 15rpx 22rpx;
text-align: center;
font-size: 14px;
color: #9d9d9d;
}
.navBar-box .cate-list.on {
color: #000000;
font-weight: bold;
}
在index.wxml我们使用bindtap进行点击事件监听，设置事件名称为navbarTap并且在index.js里设置这个事件对应的逻辑处理。我们在组件上使用**wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，想要了解wx:for**可以参考该资料：https://www.w3cschool.cn/weixinapp/weixinapp-list.html
index.js
//导航栏
// pages/index/index.js
var app = getApp()
Page({
data:{
category: [ // 导航栏内容数据
{name:'热门',id:"remen" },
{name:'美食',id:'meishi'},
{name:'居家',id:"jujia"},
{name:'美妆',id:"meizhuang"},
{name:'女装', id:"nvzhuang"},
{name:'母婴',id:"muying"},
{name:"男装",id:"nanzhuang"},
{name:"鞋品",id:"xiepin"},
{name:"箱包",id:"xiangbao"},
{name:"配饰",id:"peishi"},
{name:"儿童",id:"ertong"},
{name:"数码",id:"shuma"},
{name:"家电",id:"jiadian"},
{name:"内衣",id:"neiyi"},
{name:"车品",id:"chepin"},
{name:"文体",id:"wenti"},
{name:"宠物",id:"chongwu"},
{name:"其他",id:"qita"}
],
curIndex: 0,
detail: [],
toView: 'remen',
scroll: true
},
navbarTap(e) {
this.setData({
curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0,
toView: e.currentTarget.dataset.index,
})
},
})
保存查看一下：
3、首页轮播图
在l**index.wxml**添加以下内容
<swiper class="banner" indicator-dots autoplay indicator-active-color="#fbbd08" circular>
<block wx:for="{{bannerList}}" wx:key="id">
<swiper-item>
<image lazy-load src="{{item.img}}" class="banner_image" />
</swiper-item>
</block>
</swiper>
**index.wxss**添加如下样式
.banner {
width: 100%;
display: flex;
box-sizing: border-box;
height: 184rpx;
}
.banner_image {
width: 100%;
padding: 16rpx 16rpx 12rpx 16rpx;
display: flex;
box-sizing: border-box;
height: 160rpx;
}
**index.js**添加如下内容,在data对象添加一个数组对象。
bannerList:[
{id:"one",img:"/images/banner/banner-one.png"},
{id:"teo",img:"/images/banner/banner-two.png"},
{id:"three",img:"/images/banner/banner-three.jpg"},
{id:"four",img:"/images/banner/banner-four.jpg"}
],
最终实现的效果图如下：
本文已同步发表个人博客网站 https://qiucode.cn/article/91
标签：box,index,name,微信,border,首页,电商,banner,id 来源： https://blog.csdn.net/coco2d_x2014/article/details/115034308
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。