小程序项目实例

小程序开发实战：事件、上传与遍历

最新推荐文章于 2024-09-06 14:55:10 发布

原创最新推荐文章于 2024-09-06 14:55:10 发布 · 429 阅读

2 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

8 篇文章

订阅专栏

本文通过小程序项目实例，探讨了事件绑定、参数传递、使用class样式三元运算符处理标签选中状态的方法，并详细讲解了图片上传、循环遍历嵌套数据结构的操作，以及如何实现删除功能。

标签的选中与否

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