美文网首页
微信小程序简单的数据传递

微信小程序简单的数据传递

作者: 谢小逸 | 来源:发表于2017-06-15 10:49 被阅读0次

废话不说,直接上代码

page1的前端代码:

在每个view中都带有对应的data-name,并且绑定了方法bindViewTap


<view class="ab a1" bindtap="bindViewTap" data-name="a1"></view>
<view class="ab a2" bindtap="bindViewTap" data-name="a2"></view>
<view class="ab a3" bindtap="bindViewTap" data-name="a3"></view>
<view class="ab a4" bindtap="bindViewTap" data-name="a4"></view>
<view class="ab a5" bindtap="bindViewTap" data-name="a5"></view>
<view class="ab a6" bindtap="bindViewTap" data-name="a6"></view>
<view class="ab a7" bindtap="bindViewTap" data-name="a7"></view>
<view class="ab a8" bindtap="bindViewTap" data-name="a8"></view>

page1的js脚本:

获取当前点击的参数,并带参进行页面跳转

   //事件处理函数
  bindViewTap: function(e) {
   console.log(e.currentTarget.dataset.name)
   var indexa=e.currentTarget.dataset.name;
    wx.navigateTo({
      url: '../page2/page2?name='+indexa
    })
  }

page2的前端代码:

通过for-items进行数据遍历

<block wx:for-items="{{list}}" wx:key="{{item.id}}" >
 <navigator url="../index/index" class="navigator">
  <view class="flex-item   {{item.index=='2' ? 'bc_red' : ''}}" >
    <image src="{{item.srcurl}}" style="width: 370rpx; height:498rpx;"  bindload="imageLoad"></image>
   <view style="margin-left:18rpx"> <text class="productext">{{item.text}}</text><text class="price">¥{{item.price}}</text></view> 
  </view>
  </navigator>
 </block>
page2的js脚本:

通过option拿到page1传过来的值,进行判断,并用setData赋值给list;

  onLoad: function (option) {
    //  console.log(option.name);
    var lista ; 
    switch (option.name) {
      case "a1": lista = this.data.list;
        break;
      case "a2": lista = this.data.list2;
        break;
      case "a3": lista = this.data.list3;
        break;
      case "a4": lista = this.data.list4;
        break;
      case "a5": lista = this.data.list5;
        break;
      case "a6": lista = this.data.list6;
        break;
      case "a7": lista = this.data.list7;
        break;
      case "a8": lista = this.data.list8;
        break;
      default: lista = [];
        break;
    }
     this.setData({
       list: lista
    });
  }

相关文章

网友评论

      本文标题:微信小程序简单的数据传递

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