小程序scroll-view左右滑動

防止本身再次遇到的時候遇到問題，就貼在這裏可供你們參考喲

<view class="scrool-left">
<scroll-view scroll-x="true" style="white-space: nowrap; display: block" class="showmian">
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法1</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法</view>
<view bindtap="chooseItem" class="w20 hovertxt" data-index="{{index}}">婚姻政法14</view>
</scroll-view>
</view>

 

樣式裏面寫入這些就能夠啦

.showmian{ background: #eeeeee;margin: 0 auto; width: 100%; padding: 10px 0px;}
.showmian view{ text-align: center; font-size: 30rpx; color: #646464;}
.hovercolor{ color: #17a5ff !important;}
.hovertxt{ color: #17a5ff !important;}
.w25{display:inline-block;}
.w20{display:inline-block; width:20%;word-wrap : break-word ;word-break:break-all; text-align: center;}
.scrool-left{position: relative; background: #eeeeee;}
.leftjiantou{position: absolute; top:38%; right: 1%;}
.leftjiantou image{ width: 10px;}
.lefts{ left: 1%; top:38%;}

 

樣式不一樣的，親們能夠自行修改