标签的选中与否
知识点:事件绑定catchtap
,传参,class样式三元运算符,传参data-
<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; }
// 上传图片 chooseImg: function (e) { var that = this; wx.chooseImage({ count: 1, success(res) { const tempFilePaths = res.tempFilePaths; if (e.currentTarget.dataset.type == 0) { //上传头像 that.setData({ tx: tempFilePaths[0] }) }else if (e.currentTarget.dataset.type == 1) { //个人简历 that.setData({ jianli: tempFilePaths[0] }) } else if (e.currentTarget.dataset.type == 2) { // 我的照片 that.setData({ myphoto: tempFilePaths[0] }) } else if (e.currentTarget.dataset.type == 3) { // 上传照片 that.setData({ photo: tempFilePaths[0] }) } // wx.uploadFile({ // url: ‘‘, //仅为示例,非真实的接口地址 // filePath: tempFilePaths[0], // name: ‘file‘, // formData: { // ‘user‘: ‘test‘ // }, // success (res){ // console.log(res); // const data = res.data // //do something // } // }) } }) },
循环遍历嵌套
<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 }) },