收藏
回答

组件 scroll-view

使用scroll-view,滑动一行无法滑动,需要鼠标点击上一行的区域滑动,下一行才能滑动


比如说;要滑动 “特色”这一行,鼠标只能在“类型"这一行的范围里左右滑,”特色“这一行才能左右滑动

js代码:


<view class="item-wrap">
       <view class="title">{{title}}:</view>
       <scroll-view class="scroller" scroll-x>
           <repeat for="{{items}}" key="{{index}}">
               <view class="{{current==index?'item active':'item'}}" @tap="changeItem({{index}})">{{item}}</view>
           </repeat>
       </scroll-view>
   </view>

css代码:

.item-wrap{
    display: flex;
    border-bottom: 1px solid #ccc;
    white-space: nowrap
}
.title{
    width: 160rpx;
    line-height: 40px
}
.scroller{
    flex: 1;
    line-height: 42px
 
}
.item{
    display: inline-block;
    padding: 0 30rpx;
}
.active{
    background-color: #eee;
    color: orange
}


最后一次编辑于  01-19
回答关注问题邀请回答
收藏

2 个回答

  • ==
    ==
    01-19

    给个代码片段

    01-19
    赞同 1
    回复 1
    • 青栀
      青栀
      01-19

      新建的代码片段样式啥都都不加载了enmmm

      01-19
      回复
  • 黎😄
    黎😄
    01-19

    肯定样式不对。然后,你这是用了什么框架啊,语法跟我的有点不一样啊。

    01-19
    赞同
    回复 5
    • 青栀
      青栀
      01-19

      就是wepy框架啊

      01-19
      回复
    • 黎😄
      黎😄
      01-19回复青栀

      emmm~~感觉就是你的样式有点问题是吧。

      看看我的,哪有啥问题

      https://developers.weixin.qq.com/s/St5AoxmU7Q5E

      01-19
      回复
    • 青栀
      青栀
      01-19回复黎😄

      大哥看看我这个 https://developers.weixin.qq.com/s/jL7zjxmv7Q5f

      01-19
      回复
    • 青栀
      青栀
      01-19回复黎😄

      第一次弄这个代码片段样式没弄好,,,打开之后再哪个app.wxss里粘贴这个


      .container {

      height: 100%;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: space-between;

      box-sizing: border-box;

      }

      page {

      height: 100%;

      }

      .item-wrap{

      display: flex;

      line-height: 100rpx;

      height: 100rpx;

      border-bottom: 1px solid #ccc;

      text-align: center;

      white-space: nowrap;

      width:100%;

      }

      .title{

      flex: 1;

      height: 100rpx;

      }

      .scroller{

      flex: 5;


      }

      .item{

      display: inline-block;

      padding: 0 20rpx;

      box-sizing: border-box;

      line-height: 80rpx;

      border-radius: 50rpx;

      margin: 10rpx 10rpx

      }

      .active{

      background-color: #eee;

      color: orange

      }



      01-19
      回复
    • 黎😄
      黎😄
      01-21回复青栀

      https://developers.weixin.qq.com/s/ufXA7zmh7G5V

      01-21
      回复