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

废话不说,直接上代码

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
    });
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容