scroll-view實現不了滑動效果

當使用scroll-view這個標籤的時候,咱們是爲了實現向左滑或者向下滑的效果。css

你只須要將個人案例複製到你的項目,將圖片路徑修改完以後,就能夠看到效果,切記是下面那一份代碼呦!css也在一塊兒

一下是個人案例:html

在剛開始的時候就是這樣寫的,可是一直都不能夠出現滑動效果,因而果斷換思路。就有了下面的這樣的佈局佈局

<scroll-view class='cover' scrollX="true">
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
        </scroll-view>

修改事後的佈局:spa

<view class="scroll_box">
      
        <scroll-view class='cover' scrollX="true">
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
          <view>
            <image src='../../resource/1.jpg'/>
          </view>

          <view>
            <image src='../../resource/1.jpg'/>
          </view>
        </scroll-view>
      </view>
.cover{
  height: 100rpx;
}

.scroll_box{
width: 84%;
overflow: hidden;
background: #fff;
white-space: nowrap;
margin: 0 auto;
}
/*封面的樣式  */
.cover image{
  width: 150rpx;
  height: 130rpx;
  margin-right: 20rpx;
}
.cover view{
  display:inline-block;
}
相關文章
相關標籤/搜索