您好,欢迎访问成都祈钰瑶科技有限公司!

全国咨询热线

18982081108
✕

成都网站建设公司,成都网站UI设计,成都网站安全维护,成都网站内容优化服务

微信小程序怎么实现横向滑动scroll-view隐藏滚动条-创新互联

今天小编给大家分享一下微信小程序怎么实现横向滑动scroll-view隐藏滚动条的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

站在用户的角度思考问题,与客户深入沟通,找到抚州网站设计与抚州网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖抚州地区。

wxml

 <scroll-view class="recommend_scroll_x_box" scroll-x="true">
   <view class="recommend_hot_box" wx:for="{{hotList}}">
    <image src="{{item.pic}}" class="recommend_hot_image"></image>
   </view>
  </scroll-view>

wxss

.recommend_scroll_x_box {
 height: 245rpx;
 white-space: nowrap;
 display: flex;
}

::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}

.recommend_hot_box {
 width: 230rpx;
 height: 245rpx;
 margin-right: 24rpx;
 display: inline-block;
}

.recommend_hot_image {
 width: 230rpx;
 height: 143rpx;
}

js

Page({
 data: {
  hotList: [
   {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }, {
    pic: '/images/example2.png',
    title: '玻璃棧道',
    desc: '22W人去過'
   }
  ]
 }

以上就是“微信小程序怎么实现横向滑动scroll-view隐藏滚动条”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。