目录
2.轮播图--组件的使用
1.Flex布局简介
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性
1.1 什么是flex布局
1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
2) 任何一个容器都可以指定为Flex布局。
3) display: ‘flex’
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
1.2 flex属性
flex-direction 主轴的方向 默认为row
flex-wrap 如果一条轴线排不下，如何换行
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
justify-content 定义了项目在主轴上的对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 属性定义了多根轴线的对齐方式
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
学习地址：
http://www.runoob.com/w3cnote/flex-grammar.html
2.轮播图--组件的使用
点击在开发者工具中查看效果
选择导入即可：
拷取其中需要的代码并可进行修改：
index.wxml:
-
<view>
-
<swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
-
<block wx:for="{{imgSrcs}}" wx:key="text">
-
<swiper-item>
-
<view>
-
<image src="{{item.img}}" class="swiper-item" />
-
</view>
-
</swiper-item>
-
</block>
-
</swiper>
-
</view>
在没有后台的情况下会使用mokcjs：
新建一个接口：
json数据包：
-
{
-
"data": {
-
"images":[
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
-
"text":
"1"
-
},
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
-
"text":
"2"
-
},
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
-
"text":
"3"
-
},
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
-
"text":
"4"
-
},
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
-
"text":
"5"
-
},
-
{
-
"img":
"https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
-
"text":
"6"
-
}
-
]
-
},
-
"statusCode":
"200",
-
"header": {
-
"content-type":
"applicaiton/json;charset=utf-8"
-
}
-
}
index/index.js界面
-
// pages/index/index.js
-
const api =
require(
"../../config/app")
-
Page({
-
-
/**
-
* 页面的初始数据
-
*/
-
data: {
-
imgSrcs:[]
//需要调用：http://localhost:8080/demo/wx/swiperImgs接口地主数据
-
},
-
-
/**
-
* 生命周期函数--监听页面加载
-
*/
-
onLoad(
options) {
-
this.
loadSwiperImgs();
-
},
-
-
/**
-
* 生命周期函数--监听页面初次渲染完成
-
*/
-
onReady(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面显示
-
*/
-
onShow(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面隐藏
-
*/
-
onHide(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面卸载
-
*/
-
onUnload(
) {
-
-
},
-
-
/**
-
* 页面相关事件处理函数--监听用户下拉动作
-
*/
-
onPullDownRefresh(
) {
-
-
},
-
-
/**
-
* 页面上拉触底事件的处理函数
-
*/
-
onReachBottom(
) {
-
-
},
-
-
/**
-
* 用户点击右上角分享
-
*/
-
onShareAppMessage(
) {
-
-
},
-
loadSwiperImgs(
){
-
let that=
this;
-
wx.
request({
-
url: api.
SwiperImgs,
-
dataType:
'json',
-
success(
res) {
-
console.
log(res)
-
that.
setData({
-
imgSrcs:res.
data.
images
-
})
-
}
-
})
-
}
-
})
轮播图效果：
3.会议OA项目-首页
-
"list": [{
-
"pagePath":
"pages/index/index",
-
"text":
"首页",
-
"iconPath":
"/static/tabBar/coding.png",
-
"selectedIconPath":
"/static/tabBar/coding-active.png"
-
},
-
{
-
"pagePath":
"pages/meeting/list/list",
-
"iconPath":
"/static/tabBar/sdk.png",
-
"selectedIconPath":
"/static/tabBar/sdk-active.png",
-
"text":
"会议"
-
},
-
{
-
"pagePath":
"pages/vote/list/list",
-
"iconPath":
"/static/tabBar/template.png",
-
"selectedIconPath":
"/static/tabBar/template-active.png",
-
"text":
"投票"
-
},
-
{
-
"pagePath":
"pages/ucenter/index/index",
-
"iconPath":
"/static/tabBar/component.png",
-
"selectedIconPath":
"/static/tabBar/component-active.png",
-
"text":
"设置"
-
}]
copy入static文件：
static文件：
persons文件:
tabBar文件：
看一下基础的布局：
弹性布局：不会随着屏幕变化而使画面失帧
-
<!--pages/vote/list/list.wxml-->
-
<!-- <text>pages/vote/list/list.wxml</text> -->
-
<view class="box">
-
<view>1
</view>
-
<view>2
</view>
-
<view>3
</view>
-
<view>4
</view>
-
<view>5
</view>
-
<view>6
</view>
-
<view>7
</view>
-
</view>
-
/* pages/vote/list/list.wxss */
-
.
box{
-
height: 750rpx;
-
width: 750rpx;
-
background-
color: aqua;
-
display: flex;
-
}
-
view{
-
height: 100rpx;
-
width: 100rpx;
-
border: 1px solid rebeccapurple;
-
}
效果：
-
/* pages/vote/list/list.wxss */
-
.
box{
-
height: 750rpx;
-
width: 750rpx;
-
background-
color: aqua;
-
display: flex;
-
flex-
direction: column-reverse;
/*竖型排列*/
-
}
-
view{
-
height: 100rpx;
-
width: 100rpx;
-
border: 1px solid rebeccapurple;
-
}
效果：
其余的效果可以在官网中查找：
会议信息：
index.js:
-
// pages/index/index.js
-
const api =
require(
"../../config/app")
-
Page({
-
-
/**
-
* 页面的初始数据
-
*/
-
data: {
-
imgSrcs:[],
//需要调用：http://localhost:8080/demo/wx/swiperImgs接口地主数据
-
lists:[
-
{
-
"id":
"1",
-
"image":
"/static/persons/1.jpg",
-
"title":
"对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】",
-
"num":
"304",
-
"state":
"进行中",
-
"starttime":
"2022-03-13 00:00:00",
-
"location":
"深圳市·南山区"
-
},
-
{
-
"id":
"1",
-
"image":
"/static/persons/2.jpg",
-
"title":
"AI WORLD 2016世界人工智能大会",
-
"num":
"380",
-
"state":
"已结束",
-
"starttime":
"2022-03-15 00:00:00",
-
"location":
"北京市·朝阳区"
-
},
-
{
-
"id":
"1",
-
"image":
"/static/persons/3.jpg",
-
"title":
"H100太空商业大会",
-
"num":
"500",
-
"state":
"进行中",
-
"starttime":
"2022-03-13 00:00:00",
-
"location":
"大连市"
-
},
-
{
-
"id":
"1",
-
"image":
"/static/persons/4.jpg",
-
"title":
"报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
-
"num":
"150",
-
"state":
"已结束",
-
"starttime":
"2022-03-13 00:00:00",
-
"location":
"北京市·朝阳区"
-
},
-
{
-
"id":
"1",
-
"image":
"/static/persons/5.jpg",
-
"title":
"新质生活 · 品质时代 2016消费升级创新大会",
-
"num":
"217",
-
"state":
"进行中",
-
"starttime":
"2022-03-13 00:00:00",
-
"location":
"北京市·朝阳区"
-
}
-
]
-
},
-
-
/**
-
* 生命周期函数--监听页面加载
-
*/
-
onLoad(
options) {
-
this.
loadSwiperImgs();
-
},
-
-
/**
-
* 生命周期函数--监听页面初次渲染完成
-
*/
-
onReady(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面显示
-
*/
-
onShow(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面隐藏
-
*/
-
onHide(
) {
-
-
},
-
-
/**
-
* 生命周期函数--监听页面卸载
-
*/
-
onUnload(
) {
-
-
},
-
-
/**
-
* 页面相关事件处理函数--监听用户下拉动作
-
*/
-
onPullDownRefresh(
) {
-
-
},
-
-
/**
-
* 页面上拉触底事件的处理函数
-
*/
-
onReachBottom(
) {
-
-
},
-
-
/**
-
* 用户点击右上角分享
-
*/
-
onShareAppMessage(
) {
-
-
},
-
loadSwiperImgs(
){
-
let that=
this;
-
wx.
request({
-
url: api.
SwiperImgs,
-
dataType:
'json',
-
success(
res) {
-
console.
log(res)
-
that.
setData({
-
imgSrcs:res.
data.
images
-
})
-
}
-
})
-
}
-
})
index.wxml:
-
<!--pages/index/index.wxml-->
-
<!-- <text>pages/index/index.wxml</text> -->
-
<view>
-
<swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
-
<block wx:for="{{imgSrcs}}" wx:key="text">
-
<swiper-item>
-
<view>
-
<image src="{{item.img}}" class="swiper-item" />
-
</view>
-
</swiper-item>
-
</block>
-
</swiper>
-
</view>
-
<view class="mobi-title">
-
<text class="mobi-icon">
</text>
-
<text>会议信息
</text>
-
</view>
-
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
-
<view class="list" data-id="{{item.id}}">
-
<view class="list-img">
-
<image class="video-img" mode="scaleToFill" src="{{item.image}}">
</image>
-
</view>
-
<view class="list-detail">
-
<view class="list-title">
<text>{{item.title}}
</text>
</view>
-
<view class="list-tag">
-
<view class="state">{{item.state}}
</view>
-
<view class="join">
<text class="list-num">{{item.num}}
</text>人报名
</view>
-
</view>
-
<view class="list-info">
<text>{{item.location}}
</text>|
<text>{{item.starttime}}
</text>
</view>
-
</view>
-
</view>
-
</block>
-
<view class="section bottom-line">
-
<text>到底啦
</text>
-
</view>
index.wxss:
-
.mobi-title {
-
font-size: 12pt;
-
color: #777;
-
line-height: 110%;
-
font-weight: bold;
-
width: 100%;
-
padding: 15rpx;
-
background-color: #f3f3f3;
-
}
-
-
.mobi-icon {
-
padding: 0rpx 3rpx;
-
border-radius: 3rpx;
-
background-color: #ff7777;
-
position: relative;
-
margin-right: 10rpx;
-
}
-
-
/*list*/
-
.list {
-
display: flex;
-
flex-direction: row;
-
width: 100%;
-
padding: 0 20rpx 0 0;
-
border-top: 1px solid #eeeeee;
-
background-color: #fff;
-
margin-bottom: 5rpx;
-
/* border-radius: 20rpx;
-
box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
-
}
-
-
.list-img {
-
display: flex;
-
margin: 10rpx 10rpx;
-
width: 150rpx;
-
height: 220rpx;
-
justify-content: center;
-
align-items: center;
-
}
-
-
.list-img .video-img {
-
width: 120rpx;
-
height: 120rpx;
-
-
}
-
-
.list-detail {
-
margin: 10rpx 10rpx;
-
display: flex;
-
flex-direction: column;
-
width: 600rpx;
-
height: 220rpx;
-
}
-
-
.list-title text {
-
font-size: 11pt;
-
color: #333;
-
font-weight: bold;
-
}
-
-
.list-detail .list-tag {
-
display: flex;
-
height: 70rpx;
-
}
-
-
.list-tag .state {
-
font-size: 9pt;
-
color: #81aaf7;
-
width: 120rpx;
-
border: 1px solid #93b9ff;
-
border-radius: 2px;
-
margin: 10rpx 0rpx;
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
}
-
-
.list-tag .join {
-
font-size: 11pt;
-
color: #bbb;
-
margin-left: 20rpx;
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
}
-
-
.list-tag .list-num {
-
font-size: 11pt;
-
color: #ff6666;
-
}
-
-
.list-info {
-
font-size: 9pt;
-
color: #bbb;
-
margin-top: 20rpx;
-
}
-
.bottom-line{
-
display: flex;
-
height: 60rpx;
-
justify-content: center;
-
align-items: center;
-
background-color: #f3f3f3;
-
}
-
.bottom-line text{
-
font-size: 9pt;
-
color: #666;
-
}
效果展示：
转载：https://blog.csdn.net/weixin_67338832/article/details/128472671
查看评论