码迷,mamicode.com
首页 > 微信 > 详细

微信小程序分类导航图标左右滑动

时间:2020-06-02 13:34:45      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:image   info   mamicode   wrap   top   into   radius   page   spec   

技术图片

wxml

<scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll">
    <swiper class="page_class" indicator-dots="true" autoplay="" interval="" duration="500">
        <block wx:if="{{homeDate.brand}}">
            <swiper-item>

                <view class="page_li center" wx:for="{{homeDate.brand}}" catchtap=toList data-cateid="{{item.id}}" data-pid="-2">
                    <block wx:if="{{index<8}}">
                        <image src={{item.logo}} mode=aspectFill></image>
                        <text>{{item.name}}</text>
                    </block>
                </view>

            </swiper-item>
        </block>
        <block wx:if="{{homeDate.brand.length>7}}">
            <swiper-item>
                <view class="page_li page_num center" wx:for="{{homeDate.brand}}" catchtap=toList data-cateid="{{item.id}}" data-pid="-2">
                    <block wx:if="{{index>7}}">
                        <image src={{item.logo}} mode=aspectFill></image>
                        <text>{{item.name}}</text>
                    </block>
                </view>
            </swiper-item>
        </block>
    </swiper>
</scroll-view>

wxss

.page_class{padding:0 0 20rpx;margin-top: 20rpx;white-space: nowrap;height: 360rpx;}
.page_class .page_li{width: 20%;margin-top: 20rpx;color: #3d3d3d;}
.page_class image{width: 90rpx;height: 90rpx;border-radius: 50%;display: block;margin: 0 auto 8rpx;}
.page_class .page_li {float: left;display: -webkit-flex;flex-direction: column;flex-wrap: wrap;width: 25%;text-align: center;margin: 10rpx 0;}
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{margin-bottom: 2rpx;}
.page_class .wx-swiper-dot{width:40rpx;display: inline-flex;height: 10rpx;justify-content:center;border-radius: 6rpx;margin: 0;}
.page_class .wx-swiper-dot::before{content: ‘‘;flex-grow: 1;background: rgba(255,255,255,0.8);border-radius: 6rpx;}
.page_class .wx-swiper-dot-active::before{background:#f6414a;}
.page_num:nth-child(-n+8){display: none;}

 

微信小程序分类导航图标左右滑动

标签:image   info   mamicode   wrap   top   into   radius   page   spec   

原文地址:https://www.cnblogs.com/liweitao/p/13030375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!