微信小程序 —— scroll-view左右联动(左侧联动右侧)

以下所述参考网上众多大佬略写,本人只是菜鸟一枚,记录博客主要怕自己记不住,方便以后参考,有何不足,欢迎补充…
方式方法和网上大多大佬有雷同,因为我也是参考网上各位大佬的…

 html:
   	//左侧导航
   	<scroll-view class='scroll font_26 mb90' scroll-y="true" >
   		// 动态获取的左侧导航
       	<view class="c9 tc scrollList {{target === item.categoryId?'current':''}}" wx:for='{{navigation}}' wx:key='{{index}}' 
       		bindtap='switchCategory' data-id="view-{{index}}" data-current="{{item.categoryId}}" >
             {{item.name}}
        </view>
    </scroll-view>
	//右侧内容
	右侧内容一定要个一个固定高度,否则联动将会失效
  <scroll-view class='shopRight mt1 df w80' scroll-into-view="{{toPart}}" 
    	scroll-y="true" scroll-with-animation="true" scroll-top="{{scrollTop}}" 
    	style='height:{{scrollHeight}}px'>
    	// scrollHeight 动态获取的高度
    	<view  id="view-{{i}}" class='flex_start w100 bg shopRightList flex-column' 
      		wx:for='{{goodsList}}' wx:key='{{index}}' wx:for-index="i" >
        	<view class="font_14 mt30 c3">{{item.categoryName}}</view>
      		<view class="flex-row goodsItem bbe" wx:for="{{item.goodsItem}}" wx:for-item="goodsItem" wx:key='{{index}}' wx:for-index="j">
        <!-- 商品信息 -->
            <view class='w40'>
              <view class='font_28 ovh1'>{{goodsItem.name}}</view>
              <view class='mt25 font_24 c9'>规格:{{goodsItem.specification}}/袋</view>
              <view class='mt25 font_28'>¥{{goodsItem.price}}</view>
            </view>
   		</view>
  </scroll-view>

js:

	// 动态获取屏幕高度,将高度给右侧商品
	/** 
  	 * 生命周期函数--监听页面初次渲染完成 
   */
  onReady: function () {
   	let scrollHeight = wx.getSystemInfoSync().windowHeight-85;
    this.setData({
      scrollHeight: scrollHeight
    })
  },
      // 点击左侧当行调到相应的商品 
      switchCategory(e) {
        let id = e.currentTarget.dataset.current, view = e.currentTarget.dataset.id;
        this.setData({
          target: id,
          toPart: view,
        });
      },
      
     // 获取商品列表 
      getGoodsList() {
        network._get({
          url: ,
          success: (res) => {
            if (res.data.code === '000000' && res.data.bizData) {
              this.setData({ 
                navigation: res.data.bizData.categoryResVos,
                target: res.data.bizData.categoryResVos[0].categoryId
              })
              var data = [], list=[], that = this, categoryName = '';
              this.data.navigation.map(i => {
                var arr = [];
                res.data.bizData.shopProductResDtos.map(j => {
                  if (i.categoryId === j.categoryId) {
                    categoryName = j.categoryName;
                    arr.push(j)
                  }
                })
                data = [{ categoryName: categoryName, goodsItem: arr }];
                list = list.concat(data)
              })
              this.setData({
                goodsList: list
              })
            }
          }
        })
      },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值