今天给大家带来各行各业职位分类选择页面模板制作设计教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/worktype/worktype.wxml-->
<view class="worktype_wrap">
<view wx:if="{{show}}" class="has_select">
<view class="title">
<view>已选职位</view>
<view>{{has_post.length}}/5</view>
</view>
<view class="w_action_list">
<view bindtap="del_this" wx:for="{{has_post}}" data-city="{{item.post}}" data-id="{{item.id}}">
{{item.post}}<icon size="18" class="red" type="clear"></icon>
</view>
</view>
</view>
<view wx:for="{{post_type}}" bindtap="select_type" data-id="{{item.id}}" data-province="{{item._type}}" class="w_a_wrap">
<view class="w_a_list" >{{item._type}}</view>
<image wx:if="{{show_img}}" class="image_select" src="../workplace/image/_03.png"></image>
<image wx:if="{{!show_img}}" class="image_select" src="../workplace/image/jiantou_tou.png"></image>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/worktype/worktype.wxss */
.has_select{
padding: 15rpx;
background-color: #fffbdd;
}
.has_select .title{
display: flex;
justify-content: space-between;
align-items: center;
color: #888888;
}
.has_select .w_action_list{
/*border: 1px solid red;*/
margin-top: 15rpx;
overflow: hidden;
}
.has_select .w_action_list view{
display: table;
float: left;
background-color: #fff;
padding: 10rpx;
margin: 10rpx;
}
.has_select .w_action_list view icon{
display: table-cell;
vertical-align: middle;
}
.w_a_wrap{
border-bottom: 1px solid #e5e5e5;
margin-left: 3%;
display: flex;
align-items: center;
justify-content: space-between;
}
.w_a_wrap .w_a_list{
padding: 15rpx;
}
.image_select{
width: 35rpx;
height: 35rpx;
padding-right: 3%;
}
|
三、js页面代码如下：
// pages/worktype/worktype.js
const work = require('../../utils/AELPOSITION.js');
const select = require('../../utils/util.js');
Page({
data:{
show_img:false,
has_post:[],
post_type:[],
show:true
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数;
var post_type =select._type( work.type ); //全部类型
let experience = options.status; //识别 是添加工作经验
this.setData({
post_type:post_type
})
if( experience ){ //如果是添加工作经验,去除已选职位模块
this.setData({
show:false
})
}
wx.setStorage({ //缓存状态
key:"experience",
data:experience
})
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
var has_post= wx.getStorageSync('has_post') || [];
this.setData({
has_post:has_post
})
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
select_type:function(e){
let id = e.currentTarget.dataset.id;
id.length == 3 ? id = '0'+id:id =id;
var experience = wx.getStorageSync('experience');
if( experience ){
wx.redirectTo({
url: '../worktypeTwo/worktypeTwo?id='+id,
})
}else{
wx.navigateTo({
url: '../worktypeTwo/worktypeTwo?id='+id,
})
}
},
del_this:function(e){ //删除选中职位
let id = e.currentTarget.dataset.id;
var has_post_temp = wx.getStorageSync('has_post') || [];
var naw_post =[];
for( let i =0,arr=has_post_temp;i<arr.length;i++ ){
if( arr[i].id != id ){
naw_post.push(arr[i])
}
}
wx.setStorage({
key: 'has_post',
data:naw_post
})
this.setData({
has_post:naw_post
})
}
})
|
.jpg)
.jpg)
