微信小程序学习day01
目标:
1、实现轮播图
2、实现首页九宫布局
3、实现图片布局
4、实现tabbar
轮播图实现:
<!--轮播图-->
<swiper indicator-dots circular autoplay interval="3000" indicator-color="#fff">
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.path}}" ></image>
</swiper-item>
</swiper>
indicator-dots:显示轮播图圆点
circular:轮播图环绕展示
autoplay:自动展示、
interval设置轮播时间
indicator-color:设置圆点颜色
样式:设置轮播图高度,设置轮播图图片宽高
swiper {
height: 350rpx;
}
swiper image{
height: 100%;
width: 100%;
}
九宫格实现:
<!--九宮格-->
<view class="grid-list">
<view class="grid-item" wx:for="{{gridList}}" wx:key="id">
<image src="{{item.coverImg}}"></image>
<text>{{item.name}}</text>
</view>
</view>
样式:
/**九宫格*/
.grid-list{
display: flex;/**弹性布局*/
flex-wrap: wrap;/**让弹性盒元素在必要的时候拆行(换行)*/
border-left: 1rpx solid #efefef; /**添加九宫格左侧 边框*/
border-top: 1rpx solid #efefef;/**添加九宫格左顶部边框*/
}
.grid-item{
width: 33.33%; // 设置一行为3个按钮,各站三分之一
height: 190rpx; // 各个元素高度
display: flex; // 弹性布局
flex-direction: column; // 设置主轴方向 横轴
align-items: center; /**设置侧轴上的子元素排列方式 垂直*/
justify-content: center; /**设置主轴上的子元素排列方式 上下*/
border-right: 1rpx solid #efefef; // 设置各个元素右边框
border-bottom: 1rpx solid #efefef; // 设置各个元素低部边框
box-sizing: border-box; /**元素的总高度和宽度包含内边距和边框(padding 与 border) :*/
}
实现图片布局:
<!--图片区-->
<view class="image-box">
<image src="/images/hunsha-1.jpg" mode="widthFix"></image>
<image src="/images/hunsha-3.jpg" mode="widthFix"></image>
</view>
样式:
.image-box{
display: flex; // 弹性布局
padding: 20rpx 10rpx 0rpx 0rpx; /**定义元素边框与元素内容之间的空间 上、右、下、左*/
justify-content: space-around; // 均匀排列每个元素 每个元素周围分配相同的空间
}
.image-box image{
width: 45%;
border-radius: 20rpx;
}
/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准,一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
实现tabbar:
直接在app.json中添加:最多5个,最少2个
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/icon/home.png",
"selectedIconPath": "/images/icon/home-select.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/icon/message.png",
"selectedIconPath": "/images/icon/message-select.png"
},{
"pagePath": "pages/contact/contact",
"text": "我的",
"iconPath": "/images/icon/contact.png",
"selectedIconPath": "/images/icon/contact-select.png"
}
]
},
相关文章
- 微信公众平台搭建与开发揭秘
- 微信小程序 - bindcontroltap和control的关系(map)
- c# .net 实现微信支付v3 JSAPI下单
- 【微信小程序】-- 自定义组件 - behaviors(三十九)
- android的微信签名
- 五大机器学习微信公众号推荐
- 一、微信小程序支付
- 微信小程序开发规范文档-wxss代码规范
- js监测设备类型【安卓,ios,苹果微信,电脑pc】
- 微信分享JS-SDK
- 微信小程序 网课学习笔记 开发前的准备工作(1)
- TP5结合微信公众号学习笔记一(入门篇)
- Python学习---模拟微信网页登录180410
- 微信开发学习日记(二):3个案例
- 微信小程序学习第3天——网络数据请求
- 微信小程序学习第1天:微信小程序开发入门介绍
- 企业微信自建应用开发