美文网首页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
        })
    }
    
    数值修改结果页

    相关文章

      网友评论

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

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