小程序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%;}

 

样式不同的,亲们可以自行修改

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM