zoukankan      html  css  js  c++  java
  • scroll-view 小程序横向滚动

    page .bottom {
    padding-top: 100rpx;
    }
    page .bottom .jr_bottom scroll-view {
    white-space: nowrap;
    }
    page .bottom .jr_bottom .view_nr:first-child{
    margin-left: 50rpx;
    }
    page .bottom .jr_bottom .view_nr {
    display: inline-block;
    236rpx;
    height: 316rpx;
    border: 1px solid red;
    margin-right: 50rpx;
    }

    page .bottom .jr_bottom .view_nr image {
    236rpx;
    height: 316rpx;
    }

    page .bottom .jr_bottom .view_nr text {
    display: block;
    239rpx;
    height: 50rpx;
    background: rgba(27, 188, 157, 1);
    border-radius: 8rpx;
    color: #fff;
    text-align: center;
    }
     
     
    moban:[
    { src:'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg',text:'科创模式'},
    { src: 'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg', text: '时尚模式' },
    { src: 'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg', text: '运动模式' }
    ]
     
    <view class='bottom'>
    <view class='jr_bottom'>
    <block wx:for="{{[1]}}">
    <scroll-view scroll-x="true">
    <view wx:for="{{moban}}" class='view_nr'>
    <image src="{{item.src}}" mode="aspectFill"></image>
    <text>{{item.text}}</text>
    </view>
    </scroll-view>
    </block>
    </view>
    </view>
  • 相关阅读:
    坑爹的A标签 href
    JS 遍历 json key ,获取设置可变的key
    js to json字符串
    js eval深入
    Js 省市联动
    JS with用法
    JS
    js 内置对象常用方法
    django-pure-pagination 分页插件
    OpenStack 网络服务 Neutron 私有网络构建(十九)
  • 原文地址:https://www.cnblogs.com/ylblogs/p/9577301.html
Copyright © 2011-2022 走看看