1. 程式人生 > 實用技巧 >小程式專案例項

小程式專案例項

標籤的選中與否

知識點:事件繫結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
  })
},