微信小程序scroll-view实现左右联动效果

微信小程序利用scroll-view实现左右联动,供大家参考,具体内容如下

点击左边的按钮时,右边可以跳动到指定的位置

  • 首先要注意使用scroll-view竖屏滚动,需要给scroll-view固定高度
  • 其次在点击时,需要给需要滚动的scroll-view加上scroll-into-view,其值应该是子元素的id,且id不能以数字 开头

滚动右边,左边菜单跳到相应的位置

  • 其实现的思想是,在右边滚动屏滚动时,得到滚动的距离。将右边滚动屏中各模块到达顶部的距离计算出来放到一个数组中。第一个模块的滚动距离是本身的高度,第二个模块的滚动距离是第一个模块的高度加上自身的高度,以此类推。滚动时,判断滚动距离在保存好的数组中的哪个阶段,并以此得出符合条件的下标值,将左侧菜单对应的下标中的值做改动,就可以实现左右联动。
  • 计算各模块的高度时,获取元素需要使用wx.createSelectorQuery(),其返回selectorQuerys对象实例;再利用返回来的节点的boundingClientRect(function callback)方法获取节点的布局位置信息,在SelectorQuery.exec()执行后,将信息返回在回调函数中。本文中将获取元素高度的方法写在了onload中。

实现效果图:

主要代码如下:

index.wxml

<view class="container">
  <view class="category-left">
    <scroll-view scroll-y="true" style="height:100%">
      <block wx:for="{{category}}" wx:key="id">
       <view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
      </block>
    </scroll-view>
  </view>
  <view class="category-right">
    <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
      <view class="categoty-detail">
      <block wx:for="{{content}}" wx:key="id">
        <view class="catefory-main">
          <view class="category-title" id="{{item.id}}">{{item.title}}</view>
          <view class="category-content">
              <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
                <image src="{{i.src}}"></image>
                <text>{{i.text}}</text>
              </view>
          </view>
        </view>
      </block>
      </view>
    </scroll-view>
  </view>
</view>

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    toView: 'a1',
    activeId: 'a1',
    category: [
      {name: '新品', id: 'a1'},
      { name: '众筹', id: 'a2' },
      { name: '小米手机', id: 'a3' },
      { name: 'redmi手机', id: 'a4' },
      { name: '黑鲨游戏', id: 'a5' },
      { name: "手机配件", id: 'a6' },
      { name: '电视', id: 'a7'},
      { name: '电脑', id: 'a8' },
    ],
    content: [
      {
        title: '- 新品 -',
        options: [
          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},
          { src: '../../image/redmi.png', id: '002', text: 'redmi8A' },
          { src: '../../image/redmi.png', id: '003', text: '小米9pro 5G'},
          { src: '../../image/redmi.png', id: '004', text: 'redmi8'},
          { src: '../../image/redmi.png', id: '005',text: 'redmi8' }
        ],
        id: 'a1'
      },
      {
        title: '- 众筹 -',
        options: [
          { src: '../../image/zhongchou.png', id: '006', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},
          { src: '../../image/zhongchou.png', id: '008', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }
        ],
        id: 'a2'
      },
      {
        title: '- 小米手机 -',
        options: [
          { src: '../../image/xiaomi.png', id: '006', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '007', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '008', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '009', text: 'redmi8' }
        ],
         id: 'a3'
      },
      {
        title: '- redmi手机 -',
        options: [
          { src: '../../image/hongmi.png', id: '006', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '007', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '008', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '009', text: 'redmi8' }
        ],
        id: 'a4'
      }

    ],
  },
  //事件处理函数
  onLoad: function () {
    this.setData({
      toView: 'a1',
      heightArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },
  clickItem(e) {
    this.setData({
      activeId: e.currentTarget.dataset.id,
      toView: e.currentTarget.dataset.id
    })
  },
  scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    this.setData({
      activeId: 'a'+index
    })

  },
  // 计算滚动的区间
  calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(height)
    }else {
      this.data.heightArr.forEach(ele => {
        height += ele
      })
      this.data.heightArr.push(height);
    }
  },
  // 计算左边选中的下标
  calculateIndex(arr, scrollHeight) {
    let index= '';
    for(let i =0;i<arr.length;i++) {
      if (scrollHeight >= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

index.wxss

/**index.wxss**/
.container {
  padding: 0;
  width:100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.category-left {
  height: 100%;
  width: 22%;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-right: 1px solid #efefef;
}
.catgegory-item {
  padding: 20rpx 0;
  font-size: 30rpx;
  text-align:  center;
}
.active-item {
  color: orange;
}
.category-right {
  flex:1;
  height: 100%;
}
.category-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190rpx);
}
.category-title {
  text-align: center;
}
.content-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  text-align: center;
  font-size: 30rpx;
}
.content-item image{
  width: 120rpx;
  height: 120rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序scroll-view实现左右联动

    本文实例为大家分享了微信小程序scroll-view实现左右联动的具体代码,供大家参考,具体内容如下 需求:项目中做了一个选择城市的需求,要求全国所有的省市区都按照中文首字母分类并排序,左侧的城市列表和右侧的字母列表实现双向联动. 第一步:根据腾讯提供的javascript SDK提供的接口,获取所有的省市区,并将省市区按照首字母进行分类排序. let _this = this; _this.mapCtx = wx.createMapContext("myMap"); // 实例化AP

  • 微信小程序实现左右联动的实战记录

    前言 最近在学习小程序,实现了左右联动的功能,记录一下思绪,方便以后参考. 最终的界面如下, 点击左边任意一个项目,右边会跳到相应项目的起始位置,右边滑动,左则会跳到相应的位置. 实现思路 在这里,右则每一项的高度都是固定的,方便定位当前滑动距离在哪一个大项(左则)里.右则的 scroll-view 使用了一项关键的属性:scroll-into-view,这个属性用来确定 scrollTop 的值的,当 scroll-into-view 的值和 scroll-view 里面的元素的id的值相等时

  • 微信小程序实现购物页面左右联动

    本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下 效果图: wxml <view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view class="

  • 微信小程序实现左右联动

    本文实例为大家分享了微信小程序实现左右联动的具体代码,供大家参考,具体内容如下 最近学校课程系统分析项目使用了微信小程序来进行搭建,在选择了点餐项目后,对主页进行实现时,想要实现像麦当劳点餐一样,左边表示类别,右边表示菜品,通过点击左边的类,右边会滚动到对应的类,滚动右边的菜品,左边当前滚动到的菜品类别也回高亮显示.那么首先先展示一下成果吧! 虽然这个功能很小,但我觉得一旦搞清楚scroll-view的原理就很有用处. 首先查看微信小程序的官方文档:scroll-view 下面来按照我自己的理解

  • 微信小程序实现菜单左右联动

    本文实例为大家分享了微信小程序实现菜单左右联动的具体代码,供大家参考,具体内容如下 今天记录一个个人写的二级联动示例. 下面是效果图: 功能实现关键是使用控件scroll-view,下面直接上示例代码. 页面对应的js文件: Page({ data: { select_index:0, scroll_height:0, left: [{ id: 1, title: '选项一' }, { id: 2, title: '选项二' }, { id: 3, title: '选项三' }, { id: 4

  • 微信小程序实现的picker多级联动功能示例

    本文实例讲述了微信小程序实现的picker多级联动功能.分享给大家供大家参考,具体如下: wxml部分: <picker mode="multiSelector" bindchange="bindjobcatchange" bindcolumnchange="bingjobcatcolumnchange" value="{{multiIndex}}" range="{{job_cat_list}}"

  • 微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,属于初级入门内容,仅供学习分享使用. 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城. 布局分析 布局分析图示如下: 涉及知识点 •scroll-view 可滚动视图区域.使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 hei

  • 微信小程序实现横向滚动导航栏效果

    1.page.wx.css内容如下: <view class='classify_list'> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify&quo

  • 微信小程序功能之全屏滚动效果的实现代码

    想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu

  • 微信小程序的tab选项卡的实现效果

    效果图,既可以点击切换,又可以滑动切换 .wxml <!--pages/detail/detail.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> &

  • 微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序实现点击卡片 翻转效果

    动画效果: wxml: <view class='main'> <!--正面的框 --> <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 -->

  • 微信小程序实现3D轮播图效果(非swiper组件)

    本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下 首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b

随机推荐