• 关于小程序点击事件 wxml如何往Js传值


    我有个瀑布流页面wxml如下

    <view class='content'>
    <view class='left'>
      <block wx:for="{{leftList}}" wx:key="index">
        <image class='pic'  style='height:{{item.CoverHeight}}' src='{{item.Cover}}' bindtap="preview" data-url="{{item.Cover}}"></image>
      </block>
    </view>
    <view class='right'>
      <block wx:for="{{rightList}}" wx:key="index">
        <image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}' bindtap="preview" data-url="{{item.Cover}}" ></image>
      </block>
    </view>
    </view>

    JS中 相关函数如下

    // pages/goods/goods.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        noramalData: [{
          "Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png",
          "CoverHeight": 467,
          "CoverWidth": 350
        },
        {
          "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg",
          "CoverHeight": 871,
          "CoverWidth": 672
        },{
          "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg",
          "CoverHeight": 467,
          "CoverWidth": 350
        },
        {
          "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg",
          "CoverHeight": 871,
          "CoverWidth": 672
        },{
          "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg",
          "CoverHeight": 467,
          "CoverWidth": 350
        },
        {
          "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg",
          "CoverHeight": 2000,
          "CoverWidth": 1500
        },
      ],
       imgarray:[
         "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png",
        'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg',
        'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg',
        'cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg',
        'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg',
        'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg',
      ],
      leftList: [],
      rightList: [],
      leftHight: 0,
      rightHight: 0
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
       //以本地数据为例,实际开发中数据整理以及加载更多等实现逻辑可根据实际需求进行实现   
    onLoad: function(options) {
      var that = this;
      var allData = that.data.noramalData;
      //定义两个临时的变量来记录左右两栏的高度,避免频繁调用setData方法
      var leftH = that.data.leftHight;
      var rightH = that.data.rightHight;
      var leftData = [];
      var rightData = [];
      for (let i = 0; i < allData.length; i++) {
        var currentItemHeight = parseInt(Math.round(allData[i].CoverHeight * 345 / allData[i].CoverWidth));
        allData[i].CoverHeight = currentItemHeight + "rpx";//因为xml文件中直接引用的该值作为高度,所以添加对应单位
        if (leftH == rightH || leftH < rightH) {//判断左右两侧当前的累计高度,来确定item应该放置在左边还是右边
          leftData.push(allData[i]);
          leftH += currentItemHeight;
        } else {
          rightData.push(allData[i]);
          rightH += currentItemHeight;
        }
      }
    
      //更新左右两栏的数据以及累计高度
      that.setData({
        leftHight: leftH,
        rightHight: rightH,
        leftList: leftData,
        rightList: rightData
      })
    },
    // })
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }, 
       //预览图片,放大预览
      preview(event) {
        console.log(event)
        let currentUrl = event.currentTarget.dataset.url
        console.log('the currentUrl you click is the:')
        console.log(currentUrl)
        wx.previewImage({
          current: currentUrl, // 当前显示图片的http链接
          urls: this.data.imgarray // 需要预览的图片http链接列表
        })
      }
    })
    相关JS代码

    通过wxml中设置 data- 关键字 然后传入 相关参数(我这里是穿入item 的Cover 就是url地址)

    这样就能在 bindtap里的  

    event.currentTarget.dataset.url
    通过这个方法
    取到瀑布流中点击的图片的url地址的值

    这样就完成了从wxml往Js传值

  • 相关阅读:
    python记录程序运行时间的三种方法
    LeetCode 922. 按奇偶排序数组 II 做题小结
    LeetCode 976. 三角形的最大周长 做题小结
    LeetCode 1122. 数组的相对排序 做题小结
    LeetCode1528. 重新排列字符串 做题小结
    LeetCode 738. 单调递增的数字 做题小结
    selenium——鼠标操作ActionChains:点击、滑动、拖动
    剑指 Offer 32
    剑指 Offer 32
    二叉树的应用:二叉排序树的删除
  • 原文地址:https://www.cnblogs.com/fengfenghuifei/p/15337636.html
Copyright © 2020-2023  润新知