小程序数据列表上下滑的内部加左右滑

最新推荐文章于 2024-10-29 16:49:54 发布

qq_39094226

最新推荐文章于 2024-10-29 16:49:54 发布

阅读量940

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序左右上下都能滑动左右滑动上下滑动

本文链接：https://blog.youkuaiyun.com/qq_39094226/article/details/83115589

本文介绍了如何在小程序中设计一个组件，该组件包含固定头部和底部，中间内容区域既可以上下滑动，又可以左右滑动。通过示例的wxml、wxss和js代码，展示了实现这一交互效果的方法。

在这里插入图片描述
如图，左边是固定的，右边内容是可以左右滑动的，上面和下面部分也是固定的，整个可以上下滑动。
wxml:

<view class="top">
  <view class='topLeft'></view>
  <scroll-view class='topBox' scroll-x scroll-with-animation scroll-left='{
  
  {left}}' bindscroll="scrolling" bindtouchstart='scrollTouchStart' data-scroll='1'>
    <block wx:for='{
  
  {groupArr}}' wx:key>
      <view class='topRight'>{
  
  {item.company}}</view>
    </block>
  </scroll-view>
</view>
<view class="type">
  <view class="label">品质：</view>
  <block wx:for='{
  
  {typeArr}}' wx:key>
    <view class="item {
  
  {index==0?'marginLeft':''}} {
  
  {activeIndex==index?'cur':''}}" bindtap='chooseType' data-index='{
  
  {index}}'>{
  
  {item}}</view>
  </block>
</view>
<view class="wrapper">
  <view class="main">
    <view class="left">
      <block wx:for='{
  
  {lists}}' wx:key>
        <view class="line1 {
  
  {index==lists.length-1?'bottomBorder':''}}">
          <text class='border'>{
  
  {item.name}}</text>
        </view>
      </block>
    </view>
    <scroll-view scroll-x class="right" bindscroll="scrolling" scroll-with-animation scroll-left='{
  
  {left}}' bindtouchstart='scrollTouchStart' data-scroll='2'>
      <!-- <view class="right-wrapper"> -->
      <block wx:for='{
  
  {lists}}' wx:key>
        <view class="line2 {
  
  {index==lists.length-1?'bottomBorder':''}}">
          <block wx:for='{
  
  {item.priceArr}}' wx:key wx:for-item='price' wx:for-index='index2'>
            <view class='price'>
              {
  
  {price}}
              <!-- 最低价的样式 -->
              <image src=