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>
  • 相关阅读:
    人生长度的认识(死亡方格)
    如何才能更早的有自己的一点成就
    自制Jquery下拉框插件
    自定义Jquery 下拉框
    自定义Jquery分页插件
    Java 连接 mysql 数据库
    Git 操作分支
    CSS 循环动画效果。
    React 从0开始 消息传递
    MVC in Javascript
  • 原文地址:https://www.cnblogs.com/ylblogs/p/9577301.html
Copyright © 2011-2022 走看看