小程式專案例項
阿新 • • 發佈:2020-08-25
標籤的選中與否
知識點:事件繫結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; }
迴圈遍歷巢狀
<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 }) },