小程序项目实例

标签的选中与否

知识点:事件绑定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
  })
},

 

小程序项目实例

上一篇:小程序日历


下一篇:微信小程序商城订单上拉加载更多(接后台)