美文网首页
微信小程序数双向数据绑定

微信小程序数双向数据绑定

作者: 青山不改 | 来源:发表于2017-06-30 20:24 被阅读648次
老板突然兴起,让我做个小程序,当时我的心情是这样的

不能因为我曾经在群里说过会JS就让我做小程序啊,奴家做不到啊!

转念一想,人在屋檐下,不得不低头,只能硬着头皮上了!

然后我就去小程序官网下了个所谓的IDE,看了一遍文档,看着还行,毕竟iOS出身,一看就懂!

然后过了一个星期,老板夸我学得快,然后就没有然后嘞。。。说好的做小程序呢,UI呢!设计呢!

正当我觉得小程序可以放下的时候,一个群里有人问怎么动态添加删除Input,就像这样

上午问一遍,下午问一遍,我看不下去了,就装了一个逼,实在是后悔啊


没办法,自己装的逼,跪着也要装完,只能打开坑爹的IDE,开始写demo

最开始我以为用wx:for循环就可以啦,谁知道写完添加倒是添加的很6,但是删除的时候只能删除最后一个,最后想到了用value属性绑定data,输入数据流向data,实现双向邦定。。。

index.wxml

<view class="">
<!--<block wx:for="{{divList}}" wx:key="*this">-->
<view class="contentView" wx:for="{{divList}}" >
   <view class="del" bindtap="del" data-index="{{index}}">删除</view>
  <input data-index="{{index}}" class="conteneInput" placeholder="测试数组添加和删除" bindinput="bindKeyInput" value="{{item.content}}"/>
</view>
 
<!--</block>-->
<view class="add" bindtap="add">添加</view>
</view>

index.wxss

.add{
  width: 100%;
  height: 30px;
  text-align: center;
  background-color: rebeccapurple;
  margin-top: 10px;
  line-height: 30px;
}

.del{
  width: 50px;
  height: 50px;
  background-color: orangered;
}
.conteneInput{
  float: left;
}
.contentView{
  display: flex;
  margin: 10px;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {

    divList:[]
  },
  onLoad: function () {
    
  },
  
  add:function(e){
    var arr = this.data.divList;
    var obj = {
      content:''
    }
    arr.push(obj)
    this.setData({
      divList: arr
    })
  },
  del:function(e){
    var arr = this.data.divList;
    var index = e.currentTarget.dataset.index
    arr.splice(index,1)
    this.setData({
      divList: arr
    })
  },
  bindKeyInput: function(e) {
    console.log(e)
    var arr = this.data.divList
    var obj = arr[e.currentTarget.dataset.index]
    obj.content = e.detail.value

    this.setData({
      divList:arr
    })
  }
})

实现的效果是这样的

最后小伙儿按照我的代码也实现了他想要的效果,总算装逼成功,不辱使命!

虽然小程序带了一个小字,但是写起来也很费力,JS基础也看了一遍,但是JS的高阶函数搞得我头晕,还有JS的面向对象,好扯啊,慢慢看吧!

相关文章

  • 微信小程序数双向数据绑定

    不能因为我曾经在群里说过会JS就让我做小程序啊,奴家做不到啊! 转念一想,人在屋檐下,不得不低头,只能硬着头皮上了...

  • 小程序 小方法

    微信小程序input数据双向绑定 简单实现双向数据绑定--对象下的属性赋值绑定(可以自己改一元变量方式)每个页面引...

  • 2021-06-08

    今日收获微信小程序双向绑定hidden = "{{offerId==''}}"

  • 微信小程序数据绑定

    微信小程序的数据绑定和Vue很相似,都是用mustache(大胡子)语法,数据定义在data中。 可以在里边做一些...

  • 微信小程序数据绑定(模板)

    背景交代: 这几天公司突然想把公司的小程序开发一下,但是目前还没有小程序开发人员,就委派我学习一下,记录一下学习历...

  • 微信小程序和Vue的区别

    单向绑定 & 双向绑定 微信小程序只支持单向绑定,如果需要修改data的值,只能通过setData操作。Vue可以...

  • 微信小程序input数据双向绑定

    感谢网友提供的解决办法https://blog.csdn.net/lizhen_software/article/...

  • 小程序开发过程记录

    1、小程序数据绑定 data:{ "fromtype": "" , "personstatus":""...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • 如何做微信小程序后台的数据分析

    微信小程序后台有哪些功能能? 微信小程序数据后台(部分数据截图)​ 微信小程序后台 上图是微信小程序的后台功能,小...

网友评论

      本文标题:微信小程序数双向数据绑定

      本文链接:https://www.haomeiwen.com/subject/vovnfxtx.html