美文网首页Android技术分享交流区
微信小程序如何修改以及新增值对

微信小程序如何修改以及新增值对

作者: 秋缘未了 | 来源:发表于2018-07-27 10:25 被阅读1次

实现点赞效果,动态刷新条目小心的状态


实现效果

一修改键值对:

wxml:



  <view class="list-item" wx:for="{{articleList}}">
  <navigator url="/pages/webdetailPage/webdetail?url={{item.link}}" hover-class="navigator-hover">
    <view class="list-item-text-title">
      <image  src="/img/ic_user.png" class='userhead'></image>
      <text style='font-size: 13px;'>{{item.author}}</text>
      <text class='item_time'>{{item.niceDate}}</text>
    </view>

    <view style='margin-left: 25rpx; margin-right: 45rpx;'>
      <text class='item_content'>{{item.title}}</text>
    </view>
    
    <view style='margin-bottom: 15rpx; margin-top: 35rpx'>
      <text style='font-size: 13px; color: #1296db; margin-left: 15rpx'>{{item.chapterName}}</text>
      <block    wx:if="{{item.zan > 0}}" >
        <image  src="/img/love.png" class='userlove' data-love="{{index}}" catchtap='love_click'></image>
      </block >

      <block  wx:else>
        <image  src="/img/love_no.png" class='userlove' data-love="{{index}}" catchtap='love_click'></image>
      </block >
      
    </view>
  </navigator>
  </view>

JS:



 love_click:function(e){
var i = e.currentTarget.dataset.love  //获取所点击item的index
 var that = this;
    var zan = "articleList[" + i + "].zan";//先用一个变量,把(articleList[0].zan)用字符串拼接起来
          that.setData({
               [zan]: 1
    })

}

新增键值对:

wxml:



  <view class="list-item" wx:for="{{articleList}}">
  <navigator url="/pages/webdetailPage/webdetail?url={{item.link}}" hover-class="navigator-hover">
    <view class="list-item-text-title">
      <image  src="/img/ic_user.png" class='userhead'></image>
      <text style='font-size: 13px;'>{{item.author}}</text>
      <text class='item_time'>{{item.niceDate}}</text>
    </view>

    <view style='margin-left: 25rpx; margin-right: 45rpx;'>
      <text class='item_content'>{{item.title}}</text>
    </view>
    
    <view style='margin-bottom: 15rpx; margin-top: 35rpx'>
      <text style='font-size: 13px; color: #1296db; margin-left: 15rpx'>{{item.chapterName}}</text>
      <block    wx:if="{{item.love> 0}}" >
        <image  src="/img/love.png" class='userlove' data-love="{{index}}" catchtap='love_click'></image>
      </block >

      <block  wx:else>
        <image  src="/img/love_no.png" class='userlove' data-love="{{index}}" catchtap='love_click'></image>
      </block >
      
    </view>
  </navigator>
  </view>

JS:

 love_click:function(e){
    //新增一个键值对
    var islove = "articleList[" + i + "].islove"
    this.setData({
      [islove]:1
    })
}
数值修改结果页

相关文章

  • 微信小程序如何修改以及新增值对

    实现点赞效果,动态刷新条目小心的状态 一修改键值对: wxml: JS: 新增键值对: wxml: JS:

  • 微信小程序视频教程分享

    hello,微信小程序经过微信这几个版本的修改后,入口位置愈发明显,整体小程序市场也在蓬勃发展,我本人也是对小程序...

  • 健身房小程序开发多少钱

    微信小程序的出现,给很多的行业带来了新的体验。‌‌那么健身行业又该如何利用微信小程序开发搭建智能健身体系呢?微信小...

  • SpringBoot 仿抖音短视频小程序开发 全栈式实战项目

    第1章 千呼万唤史出来,微信小程序的简要学习 对微信小程序的大致介绍,如何注册,如何运行第一个demo。并且对微信...

  • 2017 年第 33 周新媒体营销周报

    微信小程序新入口:社群管理更加方便 微信小程序曝出一个「新入口」,这次微信把小程序的新入口放在了微信群当中。在最新...

  • 浅谈旅游类微信小程序的开发

    微信小程序如此火爆,旅游行业如何用小程序呢?旅游类微信小程序如何打造? 旅游业小程序的优势 微信小程序自今年1月正...

  • 小情书使用手册

    一、提交微信审核一定要开启微信审核模式 由于小情书是一个社交小程序,微信规定凡是社交类的小程序都需要提供《电信增值...

  • 2018-08-16

    BAT三家之中,为何只有微信小程序具有强大的用户流量以及生态场景能力?在微信生态之中,小程序如何才能存活下来? 自...

  • 微信小程序使用云函数获取openid以及快速开发

    随着微信官方对微信小程序对大力支持,以及微信小程序越来越便捷的使用,就像李小龙说的“用完即走,无需下载”一样,像平...

  • 微信小程序代码转头条小程序踩坑分享

    我们公司的微信小程序代码由于迭代了比较久,应用了很多微信小程序的新特性以及使用webpack,所以用头条的搬家工具...

网友评论

    本文标题:微信小程序如何修改以及新增值对

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