标签的选中与否
知识点:事件绑定catchtap
,传参,class样式三元运算符
<view class="title">您好,请选择标签?</view>
<view class="bq">
<text catchtap="bqCheck" wx:for="{{biaoqian}}" wx:key="index" data-index="{{index}}" class="{{item.type==false?'':'active'}}">{{item.name}}</text>
</view>
data: {
biaoqian: [
{
name: "测试1",
type: false
},
{
name: "测试2",
type: false
},
{
name: "测试3",
type: false
}, {
name: "测试4",
type: false
}, {
name: "测试6",
type: false
}, {
name: "其他",
type: false
}
]
},
// 标签选择
bqCheck: function (e) {
var that = this;
var biaoqian = that.data.biaoqian;
biaoqian[e.currentTarget.dataset.index].type = !biaoqian[e.currentTarget.dataset.index].type;
that.setData({
biaoqian: biaoqian
})
},
图片上传
<view class="imgs">
<view class="items" catchtap="chooseImg" data-type="1">
<block wx:if="{{!jianli}}">
<image src="/images/xiangji.png" class="xj"></image>
<text>个人简历</text>
</block>
<block wx:if="{{jianli}}">
<image src="{{jianli}}" class="picture" mode="aspectFill"></image>
</block>
</view>
<view class="items" catchtap="chooseImg" data-type="2">
<block wx:if="{{!myphoto}}">
<image src="/images/xiangji.png" class="xj"></image>
<text>我的照片</text>
</block>
<block wx:if="{{myphoto}}">
<image src="{{myphoto}}" class="picture" mode="aspectFill"></image>
</block>
</view>
<view class="items" catchtap="chooseImg" data-type="3">
<block wx:if="{{!photo}}">
<image src="/images/xiangji.png" class="xj"></image>
<text>上传照片</text>
</block>
<block wx:if="{{photo}}">
<image src="{{photo}}" class="picture" mode="aspectFill"></image>
</block>
</view>
</view>
.imgs {
display: flex;
margin: 20rpx 40rpx;
}
.imgs .items {
width: 173rpx;
height: 187rpx;
border: 1rpx solid rgba(175, 175, 175, 1);
overflow: hidden;
border-radius: 5rpx;
margin-right: 15rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.imgs .items .xj {
width: 58rpx;
height: 58rpx;
margin-bottom: 20rpx;
margin-top: 40rpx;
}
.imgs .items text {
display: block;
font-size: 24rpx;
color: #AFAFAF;
}
.picture {
width: 171rpx;
height: 187rpx;
}
循环遍历嵌套
<view class="item" wx:for="{{zhanpin}}">
<view class="title">
<view class="left">{{item.gangwei}}</view>
<view class="right">{{item.money}}</view>
</view>
<view class="dd">
<view class="left">
<view>
<image src="/images/icon17.png" class="map"></image>{{item.area}}
</view>
<view>
<image src="/images/icon18.png" class="time"></image>{{item.time}}
</view>
<view>
<image src="/images/icon16.png" class="xueli"></image>{{item.xueli}}
</view>
</view>
<view class="right">
<view class="btn">总赏金{{item.shangjin}}元</view>
</view>
</view>
<view class="buzhu cl">
<block wx:for="{{item.fuli}}">
<view class="btn">{{item}}</view>
</block>
</view>
<view class="name">{{item.company}}</view>
<view class="desc">
<view class="left"> <text>{{item.rongzi}}</text> | <text>{{item.number}}</text>人</view>
<view class="link">查看详情</view>
</view>
<view class="rtFix">
<view class="{{item.type == '0' ? 'btn' :'btn1'}}">已申请</view>
<view class="btn">分享职位</view>
</view>
</view>
data: {
zhanpin:[
{
gangwei:"前端开发工程师",
money:"11-14千/月",
area:"中山",
time:"3-5年",
xueli:"大专",
shangjin:"400",
fuli:["五险一金","交通补助","年终奖","弹性工作"],
company:"中山市某某某有限公司",
rongzi:"不需要融资",
number:"50-100",
type:"0"
},
{
gangwei:"前端开发工程师",
money:"11-14千/月",
area:"中山",
time:"3-5年",
xueli:"大专",
shangjin:"400",
fuli:["五险一金","交通补助","年终奖","弹性工作","环境舒适","餐补","下午茶","十三薪"],
company:"中山市某某某有限公司",
rongzi:"不需要融资",
number:"50-100",
type:"1"
}
]
},
删除
<view class="item" wx:for="{{gly}}" wx:key="index">
<image src="/images/close.png" class="closebtn" catchtap="delete" data-index="{{index}}"></image>
<view class="tx">姓名</view>
<view class="name">{{item}}</view>
</view>
/**
* 页面的初始数据
*/
data: {
gly:["张三","李四","老五"]
},
// 删除管理员
delete:function(e){
var that = this;
var gly = that.data.gly;
gly.splice(e.currentTarget.dataset.index,1);
that.setData({
gly: gly
})
},