• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

百度小程序-循环数据,图文左右互换排列

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

.swan

            <view class="content">
                <view class="server">
                    <block s-for="item,index in DataInfo">
                    <navigator class="server-item" url="/pages/detail/detail?id={{item.id}}&title={{item.title}}">
                        <view class="server-item-img {{index%2==0?'server-iteml':'server-itemr'}}" >
                            <image  src="{{item.cover_id}}" mode="widthFix" lazy-load="true"></image>
                        </view>
                        <view class="server-item-box {{index%2==0?'server-iteml':'server-itemr'}}">
                                <view class="server-item-title">{{item.title}}</view>
                                <view class="server-item-link {{index%2==0?'server-iteml':'server-itemr'}}">查看更多</view>           
                        </view>
                    </navigator>
                    </block>
                </view>
            </view>

.css

.server-item{overflow:hidden;box-shadow:0px 5px 5px 0px rgba(0,0,0,0.24);height:160rpx;margin-bottom:17rpx}
.server-iteml{float:left;text-align:left}
.server-itemr{float:right;text-align:right}
.server-item-img,.server-item-box{width:50%;height:100%}
.server-item-box{background:#1C83C5;height:100%;padding:20rpx 50rpx;box-sizing:border-box}
.server-item-img{}
.server-item-img image{width:100%;display:block;height:100px}
.server-item-title{font-size:26rpx;font-weight:normal;font-stretch:normal;line-height:33px;letter-spacing:0px;color:#ffffff}
.server-item-link{width:142rpx;height:38rpx;line-height:40rpx;font-size:22rpx;text-align:center;letter-spacing:0px;background:#fff;color:#1c83c5}

效果图


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
520表白小程序设计Python代码详解(PyQt5界面,B站动漫风)发布时间:2022-07-22
下一篇:
微信小程序-配置解答发布时间:2022-07-22
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap