小程序组件
## 小程序组件集
##### 1.轮播图
######.wxml文件
<view class="slide">
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="id">
<swiper-item>
<image src="{{item.image}}" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
</view>
######.wxss文件
.slide {
width: 100%;
height: 380rpx;
}
.slide .swiper {
width: 100%;
height: 380rpx;
}
.slide .swiper image {
width: 100%;
height: 380rpx;
}
######.js文件
data: {
imgUrls: [
{ "image": "../../image/banner.png" },
{ "image": "../../image/banner2.png" },
{ "image": "../../image/banner.png" },
{ "image": "../../image/banner2.png" }
],//图片链接地址
indicatorDots: true, //是否显示焦点
autoplay: true, //是否自动播放
interval: 2000, //自动播放时间间隔
duration: 500 //滑动时间
},
##### 2. 导航栏
###### 两列导航栏 wxml文件
<view class='nav'>
<view class='item'>
<image src='../../image/news.png'></image>
<view>
<text class='title'>互联网公司</text>
<text class='small_title'>热门抢手好工作</text>
</view>
</view>
<view class='item'>
<image src='../../image/renting.png'></image>
<view>
<text>我要兼职</text>
<text class='min_size'>闲时赚点零花钱</text>
</view>
</view>
</view>
###### 两列导航栏 wxss文件
.nav{
width: 100%;
height: 140rpx;
background: #fff;
display: flex;
margin-top:10rpx;
}
.nav .item{
height: 90%;
margin: auto 0;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
.nav .item image{
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
}
.nav .item .title{
display: inline-block;
}
.nav .tem .small_title{
font-size: 24rpx;
color: #bbb;
}
###### 四列导航栏 wxml文件
<view class='nav'>
<view class='nitem'>
<image src='../../image/news.png'></image>
<view>
<text decode='{{true}}' class='title'>招 聘</text>
</view>
</view>
<view class='item'>
<image src='../../image/renting.png'></image>
<view>
<text decode='{{true}}' class='title'>兼 职</text>
</view>
</view>
<view class='item'>
<image src='../../image/news.png'></image>
<view>
<text decode='{{true}}' class='title'>租 房</text>
</view>
</view>
<view class='item'>
<image src='../../image/renting.png'></image>
<view>
<text decode='{{true}}' class='title'>兼 职</text>
</view>
</view>
</view>
###### 四列导航栏 wxss文件
.nav{
width: 100%;
height: 160rpx;
background: #fff;
display: flex;
margin-top: 10rpx;
}
.nav .item{
height: 90%;
flex: 1;
font-size: 28rpx;
margin: auto 0;
}
.nav .item image{
width: 80rpx;
height: 80rpx;
display: block;
margin: 16rpx auto 6rpx;
}
.nav .item .title{
width: 100%;
height: 50rpx;
line-height: 50rpx;
display:inline-block;
text-align: center;
font-size: 26rpx;
}
##### 3. 列表
###### wxml文件
<view class='list'>
<view class='item' bindtap='details'>
<view class='list_img'>
<image src='../../image/header.png'></image>
</view>
<view class='list_text'>
<text class='title'>科技网络有限公司</text>
<text class='maney'>¥ 150/天</text>
<text class='adress'>定位地址</text>
<text class="list_icon">公司保证</text>
<text class="list_icon list_border">企业认证</text>
</view>
</view>
</view>
###### wxss文件
.list{
width: 100%;
height: auto;
background: #fff;
font-size: 28rpx;
margin-top: 20rpx;
overflow: hidden;
}
.list .item{
width: 100%;
height: 160rpx;
border-bottom: 1rpx solid #eee;
}
.list .item .list_img {
margin: 10rpx 10rpx 0 20rpx;
float: left;
}
.list .item .list_img image{
width: 100rpx;
height: 100rpx;
}
.list .item .list_text{
width: 80%;
height: 100%;
display: inline-block;
}
.list_text text{
width: 60%;
margin-top: 20rpx;
float: left;
}
.list_text .maney{
width: 20%;
float: right;
color:#f89997;
}
.list_text .adress{
width: 85%;
color:#bbb;
font-size: 26rpx;
margin-top: 6rpx;
}
.list_text .list_icon{
width: auto;
font-size: 22rpx;
color: #ccc;
margin-top: 6rpx;
margin-right: 10rpx;
border: 1px solid #ccc;
padding: 2rpx 6rpx;
border-radius: 8rpx;
}
.list_text .list_border{
border: 1px solid #f89997;
color: #f89997;
}
##### 3.2 文章列表
###### wxml文件
<view class='artList'>
<view class='item' bindtap='details'>
<view class='artList_img'>
<image src='../../image/header.png'></image>
</view>
<view class='artList_text'>
<text class='title'>文章标题</text>
<text class='small_title'>文章简介文章简介文章简介文章简介</text>
<text class='artList_time'>2018-1-13</text>
</view>
</view>
</view>
###### wxss文件
.artList{
width: 100%;
height: auto;
background: #fff;
font-size: 28rpx;
margin-top: 20rpx;
margin-bottom: 10rpx;
overflow: hidden;
}
.artList .item{
width: 100%;
height: 160rpx;
border-bottom: 1rpx solid #eee;
}
.artList .artList_img {
float: left;
}
.artList .artList_img image{
width: 150rpx;
height: 150rpx;
}
.artList_text{
width: 78%;
height: 80%;
float: left;
}
.artList_text text{
margin-top: 5rpx;
margin-left: 5rpx;
display: inline-block;
font-size: 24rpx;
color: #888;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.artList_text .title{
margin-top: 25rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
color: #555;
display: block;
}
.artList_text .small_title{
width: 60%
}
.artList_time{
float: right;
}
##### 3.3 文章列表多图
###### wxml文件
<view class='ArtList'>
<view class='item' bindtap='details'>
<view class='ArtList_text'>
<text>文章标题文章标题文章标题</text>
</view>
<view class='ArtList_img'>
<image src='../../image/banner.png'></image>
<image src='../../image/banner2.png'></image>
<image src='../../image/banner.png'></image>
</view>
</view>
</view>
.ArtList{
width: 100%;
height: auto;
background: #fff;
font-size: 28rpx;
margin-top: 20rpx;
margin-bottom: 10rpx;
overflow: hidden;
}
.ArtList .item{
width: 100%;
height: 240rpx;
border-bottom: 1rpx solid #eee;
}
.ArtList .item .ArtList_text{
display:block;
width: 96%;
height: 40rpx;
margin: 20rpx auto 10rpx;
font-size: 28rpx;
line-height: 40rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ArtList .item .ArtList_img{
width: 96%;
margin: 0 auto;
display: flex;
}
.ArtList_item .ArtList_img image{
width: 180rpx;
height: 180rpx;
margin-right: 2%;
flex: 1;
}
##### 4.底部tabBar
###### 使用配置app.json文件
"tabBar": {
"list": [
{
"pagePath": "pages/indexx/indexx",
"text": "首页",
"iconPath": "image/home1.png",
"selectedIconPath": "image/home.png"
},
{
"pagePath": "pages/release/release",
"text": "个人",
"iconPath": "image/me.png",
"selectedIconPath": "image/me.png"
}
]
}
##### 自定义底部
###### wxml文件
<view class='footer'>
<view class='footer_box'>
<button><image src='../../image/ins.png' /><text>灵感</text></button>
<button><image src='../../image/prof.png' />专业</button>
<button><image src='../../image/save.png' />省钱</button>
<button><image src='../../image/my.png' />我的</button>
</view>
</view>
###### wxss文件
.footer{
width: 100%;
height: 100rpx;
background: #fff;
border-top: 3rpx solid #eee;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.footer_box{
width: 100%;
display: flex;
}
.footer button{
height: 100rpx;
background-color: #fff;
float: left;
flex: 1;
font-size: 22rpx;
border-radius: 0;
}
.footer button::after{
border: none;
}
.footer_box image{
width: 35rpx;
height: 35rpx;
display: block;
margin-left: 38%;
margin-top: 15rpx;
}
##### 5.内容详情页
###### wxml文件
<view class='main'>
<view class='box'>
<view class='top'>
<view class='top_title'>
<text class='title'>电脑操作员--科技网络公司</text>
<text class='maney'>¥ 150/天</text>
<text class='time'>一天前发布</text>
</view>
<view class='top_icon'>
<text class="list_icon">公司保证</text>
<text class="list_icon list_border">企业认证 </text>
<text class="list_icon list_border">真实可信 </text>
</view>
</view>
<view class='company'>
<image class='head' src='../../image/header.png'></image>
<text>科技网络公司</text>
<text class='info'>100-500|互联网-IT</text>
<image src='../../image/jinru.png' class='int'></image>
</view>
<view class='content'>
<view class='cont_top'>
<image src='../../image/notic.png'></image>
<text>职位描述</text>
</view>
<view class='cont_cont'>
<text class='title'>岗位职责</text>
<text>1:职位描述职位描述职位描述职位描述职位描述
2:职位描述职位描述职位描述职位描述职位描述职位描述职位描述职位描述
</text>
</view>
</view>
<view class='fot'>
<view class='title'>
<text>工作时间</text>
</view>
<text class='info'>周一到周五 9-18点</text>
</view>
</view>
<view class='fotbar'>
<view class='barbox'></view>
<text>感兴趣可以立即投递简历,如有缴纳押金面试，非官方认证公司，请勿缴纳</text>
<button>投递</button>
</view>
</view>
###### wxss文件
/* pages/details/details.wxss */
page{
background: #eee;
}
.main{
width: 100%;
height: auto;
}
.box{
height: auto;
min-height: 100%;
margin-bottom: 10rpx;
}
.top{
width: 96%;
height: 210rpx;
background-color: #fff;
margin: 10rpx auto;
font-size: 28rpx;
color: #ccc;
position: relative;
padding-left: 20rpx;
}
.top .title{
width: 70%;
height: 80rpx;
line-height: 80rpx;
display: block;
font-size: 32rpx;
color: #101010;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top .top_title .maney{
margin-top: 20rpx;
color:orange;
}
.top .top_title .time{
position: absolute;
right: 20rpx;
}
.top .top_title{
height: 140rpx;
border-bottom: 1rpx solid #eee;
}
.top .top_icon{
margin-top: 16rpx;
}
.top .list_icon{
width: auto;
font-size: 22rpx;
color: #ccc;
margin-right: 10rpx;
border: 1px solid #ccc;
padding: 2rpx 0rpx;
border-radius: 8rpx;
}
.top .list_border{
border: 1px solid #f89997;
color: #f89997;
}
.company{
width: 100%;
height: 120rpx;
margin: 10rpx auto;
background-color: #fff;
position: relative;
}
.company .head{
width: 100rpx;
height: 100rpx;
margin: 10rpx 20rpx;
float: left;
}
.company .int{
width: 40rpx;
height: 40rpx;
position: absolute;
top:35rpx;
right: 10rpx;
}
.company text{
width: 60%;
height: 40rpx;
line-height: 40rpx;
display: block;
font-size: 28rpx;
float: left;
margin-top: 20rpx;
}
.company .info{
font-size: 26rpx;
color: #888;
margin-top: 0;
}
.content{
width: 100%;
height: auto;
background-color: #fff;
}
.content .cont_top{
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
border-bottom: 1rpx solid #eee;
}
.content .cont_top image{
width: 36rpx;
height: 36rpx;
display: inline-block;
vertical-align: middle;
margin: 0 10rpx 0 20rpx;
}
.content .cont_cont{
width: 94%;
height: auto;
font-size: 24rpx;
margin: 0 auto;
}
.content .cont_cont text{
color: #888;
line-height: 36rpx;
letter-spacing: 3rpx;
}
.content .cont_cont .title{
display: block;
margin: 10rpx 0;
font-size: 26rpx;
color: #101010;
}
.fot{
width: 100%;
height: 120rpx;
margin-top: 20rpx;
background: #fff;
font-size: 28rpx;
overflow: hidden;
padding-bottom: 180rpx;
}
.fot .title{
width: 90%;
display: block;
margin: 30rpx auto 10rpx;
border-left: 4px solid salmon;
text-indent: 10rpx;
}
.fot .info{
margin-left: 5%;
font-size: 24rpx;
}
.fotbar{
width: 100%;
height: 180rpx;
font-size: 28rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 1rpx solid #eee;
}
.fotbar text{
width: 90%;
height: 60rpx;
line-height: 30rpx;
text-indent: 20rpx;
display:block;
margin: 10rpx auto;
color: #f89997;
}
.fotbar button{
width: 94%;
margin: 0 auto;
height: 80rpx;
line-height: 80rpx;
color: #fff;
background: #87cefa;
}
##### 6 表单
###### wxml文件
<view class="main">
<view class='block'>
<view class='item'>
<text decode='{{true}}' class='title' >项目名称</text>
<input placeholder='请输入姓名' class='item_input'></input>
</view>
<view class='item'>
<text decode='{{true}}' class='title' >项目开始时间</text>
<picker bindchange="bindEndChange" value="{{endDate}}" class='pick' mode="date" fields="month" start="2010-09" end="2018-03" >
<view class="picker">
{{endDate}}
<image src='../../image/down.png' class='down' />
</view>
</picker>
</view>
<view class='item area'>
<text decode='{{true}}' class='title'>项目描述</text>
<textarea class='item_area' placeholder='请使用简短的语言描述项目'></textarea>
</view>
</view>
<button class='sub'>发布</button>
</view>
###### wxss文件
.block{
width: 100%;
height: auto;
overflow: hidden;
margin-top: 10rpx;
}
.item .title{
width: 100%;
height: 80rpx;
line-height: 80rpx;
margin-left: 5%;
font-size: 30rpx;
}
.item .item_input{
width: 100%;
height: 100rpx;
background-color: #fff;
padding:0 30rpx;
font-size: 28rpx;
}
.item .picker{
padding-top: 15rpx;
background-color: #fff;
height: 80rpx;
line-height: 80rpx;
width: 100%;
padding: 0 30rpx;
}
.block .pick{
width: 100%;
font-size: 28rpx;
}
.down{
width: 24rpx;
float: right;
height: 24rpx;
margin-top: 30rpx;
margin-right: 6%;
}
.item_area{
width: 100%;
height: 240rpx;
background: #fff;
font-size: 28rpx;
padding: 30rpx;
box-sizing: border-box;
letter-spacing: 2rpx;
line-height: 36rpx;
}
.sub{
width: 90%;
margin: 20rpx auto;
background-color: #b48b4d;
color: #fff;
}
###### js文件
data: {
beginDate: '2016-09',
endDate: '2016-09'
},
bindBeginChange: function (e) {
this.setData({
beginDate: e.detail.value
})
},
bindEndChange: function (e) {
this.setData({
endDate: e.detail.value
})
},
##### 7.个人中心
###### .wxml文件
<view class='container'>
<view class='top'>
<view class="top-box1">
<image mode='aspectFit' src='../../images/touxiang.jpeg'></image>
<text>安静的美男子</text>
</view>
</view>
<!--简历列表-->
<view class='list'>
<!--顶部投递详情-->
<view class="common-style detail">
<view class='common-style-1'>
<image src='../../images/icon_resume.png'/>
<text>投递详情</text>
</view>
<view class='resume-2 common-style-2'>
<image src='../../images/arrow.png'></image>
</view>
</view>
<!--中间列表-->
<view class='common-style'>
<view class='common-style-1'>
<image src='../../images/icon_resume.png'/>
<text>我的简历</text>
</view>
<view class='resume-2 common-style-2'>
<text>0%</text>
<text>完善度</text>
<image src='../../images/arrow.png'></image>
</view>
</view>
<view class='border'></view>
<view class='common-style'>
<view class='common-style-1'>
<image src='../../images/Post-Job.png'/>
<text>求职意向</text>
</view>
<view class='resume-2 common-style-2'>
<text>0</text>
<text>个求职意向</text>
<image src='../../images/arrow.png'></image>
</view>
</view>
<view class='border'></view>
<view class='common-style'>
<view class='common-style-1'>
<image src='../../images/fs-collection.png'/>
<text>我的收藏</text>
</view>
<view class='resume-2 common-style-2'>
<text>0</text>
<text>个收藏职位</text>
<image src='../../images/arrow.png'></image>
</view>
</view>
<view class='border'></view>
<view class='common-style'>
<view class='common-style-1'>
<image src='../../images/phone.png'/>
<text>我要招人</text>
</view>
<view class='resume-2 common-style-2'>
<image src='../../images/arrow.png'></image>
</view>
</view>
<!--底部设置-->
<view class='common-style set'>
<view class='common-style-1'>
<image src='../../images/set.png'/>
<text>设置</text>
</view>
<view class='resume-2 common-style-2'>
<image src='../../images/arrow.png'></image>
</view>
</view>
</view>
</view>
###### wxss文件
page{
background: #f0f4f7;
}
text{
color:#777;
font-size: 27rpx;
}
.top-box1{
background: #569dc5;
height:300rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top image{
width:120rpx;
height:120rpx;
border-radius:120rpx;
}
.top text{
color:white;
font-size: 35rpx;
margin-top:2%;
}
/*列表页*/
/*顶部投递详情*/
.detail{
margin:2% 0;
}
/*中间列表项*/
.list image{
width:46rpx;
height:46rpx;
}
.list text{
font-size:35rpx;
}
.common-style{
display: flex;
justify-content: space-between;
align-items: center;
padding: 3.4% 4%;
background: #fff;
}
.border{
border-top:1rpx solid #eeeeee;
width:92%;
margin-left:5%;
}
.common-style-1{
display: flex;
align-items: center;
}
.common-style-1 text{
margin-left:16rpx;
}
.common-style-2{
display: flex;
align-items: center;
}
.common-style-2 text:first-child{
color:#fb894a;
font-size:27rpx;
margin-right:5rpx;
}
.common-style-2 text:nth-child(2){
font-size:27rpx;
margin-right: 10rpx;
}
/*底部设置项*/
.set{
margin:2% 0;
}
##### 8.文章页面
###### .wxml文件
<view class='content'>
<view class='matter'>
<text class='title'>怎么查询发布时间</text>
<text class='time'>发布时间：2018/2/11 13:52:30</text>
<text class='text' decode="true"> 春节将至，各大快递均已停运，2月24日陆续恢复。为此给您带来不便，敬请谅解。最后祝您新年快乐,狗年旺旺旺！春节将至，各大快递均已停运，2月24日陆续恢复。为此给您带来不便，敬请谅解。最后祝您新年快乐,狗年旺旺旺！春节将至，各大快递均已停运，2月24日陆续恢复。为此给您带来不便，敬请谅解。最后祝您新年快乐,狗年旺旺旺！春节将至，各大快递均已停运，2月24日陆续恢复。为此给您带来不便，敬请谅解。最后祝您新年快乐,狗年旺旺旺！春节将至，各大快递均已停运，2月24日陆续恢复。为此给您带来不便，敬请谅解。最后祝您新年快乐,狗年旺旺旺！</text>
</view>
</view>
###### .wxss文件
.content{
width: 100%;
height: auto;
}
.content .matter{
width: 688rpx;
height: auto;
margin: 0 auto;
margin-top: 20rpx;
}
.content .matter .title{
font-size: 36rpx;
letter-spacing:3rpx;
text-align: center;
}
.content .matter .time{
display: block;
font-size: 24rpx;
color: #cfcfcf;
line-height: 50rpx;
}
.content .matter image{
width:688rpx;
height: 404rpx;
margin-top: 1%;
}
.content .matter .text{
font-size: 24rpx;
color:#b1b1b1;
}
