zoukankan      html  css  js  c++  java
  • 小程序:商品分类,实现滑块视图

    效果图:

    index.wxml文件:

            <swiper class="section icons" indicator-dots="true" autoplay="" interval="" duration="500">
                <swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="id">
                    <view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" bindtap="toNearby">
                        <image src="{{icon.img}}"/>
                        <text>{{icon.name}}1</text>
                    </view>
                </swiper-item>
            </swiper>

    index.wxss:

    .section {
        background: #fff;
        border-bottom: 1rpx solid #dedede;
        margin-bottom: 15rpx;
        padding: 20rpx;
    }
    
    .icons {
        height: 370rpx;
        padding: 20rpx 10rpx;
        padding-bottom: 0;
    }
    .icons swiper-item {
        width: 100%;
        /*display: -webkit-flex;*/
        /*flex-direction: row;*/
        /*flex-wrap: wrap;*/
        /*justify-content: center;*/
    }
    .icons .icon {
        float: left;
        display: -webkit-flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 20%;
        text-align: center;
        margin: 10rpx 0;
    }
    .icons .icon image {
        margin: 0 auto;
        width: 100rpx;
        height: 100rpx;
    }
    .icons .icon text {
        color: #000;
        font-size: 24rpx;
        line-height: 2;
    }
  • 相关阅读:
    8.池化内存分配
    7.netty内存管理-ByteBuf
    6.ChannelPipeline
    5.接入客户端连接
    4.Netty执行IO事件和非IO任务
    3.NioEventLoop的启动和执行
    2.NioEventLoop的创建
    1.netty服务端的创建
    微信订阅号开发初探
    jmeter自动化脚本编写
  • 原文地址:https://www.cnblogs.com/wangyuman26/p/8662936.html
Copyright © 2011-2022 走看看