丸子微信小程序小区版受欢迎强烈推荐自定款式

2021-03-13 01:19 jianzhan

丸子小区受欢迎强烈推荐关键是以文本主导,缩列图做为情况图并模糊不清化,右侧文本控制模块又很小,显示信息不全,将会并不是那麼火爆,因而,群友 @weiqi66 动手能力开展了自定款式,并共享来到丸子小区技术性适用群,在此谢谢 @weiqi66 共享。

实际效果以下图:

丸子小程序社区版热门推荐

自定方式以下:

1.把下边的款式拷贝加上到 index.wxss

/* 受欢迎强烈推荐 */.gundong{ position:relative; width: 280rpx; height: 380rpx; border-radius: 15rpx; display: inline-block; overflow: hidden; margin-right: 20rpx;}.scroll_box{ width: 100%; padding: 20rpx 0; white-space: nowrap;}.recoBox { padding: 10rpx 0 20rpx; position: relative; border-radius: 10rpx; overflow: hidden;}.time { display: flex; top:235rpx; left:20rpx; box-sizing: border-box; position: relative; font-family: "Arboria-Medium"; font-size: 15rpx; color: #fff; bottom:10rpx;}.re { top:15rpx; right:15rpx; display: flex; width: 30rpx; height: 30rpx; border-radius: 15rpx; position:absolute; background-color:#4bd787; background-image:url('zuozhe.svg'); background-size:45% 45%; background-repeat:no-repeat; background-position:center;}.mulu { top:230rpx; left:20rpx; margin-bottom: 10rpx; width:85rpx; border-radius: 5rpx; position: relative; font-family: "Arboria-Medium"; font-size: 16rpx; color: #fff; background-color:#4bd787; padding: 5rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}.recoTitle { top:235rpx; left:20rpx; box-sizing: border-box; font-size: 24rpx; font-family: "Arboria-Medium"; color: #fff; width: 250rpx; height: 67rpx; line-height: 32rpx; position: relative; display:block; white-space:pre-line; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}.linearMask { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.lm_1 { background: linear-gradient(to top, rgba(75, 55, 185, 1)5%,rgba(75, 55, 185, 0)75%); opacity: 0.85;}.lm_2 { background: linear-gradient(to top, rgba(75, 215, 135, 1)5%, rgba(75, 215, 135, 0)75%); opacity: 1;}.lm_3 { background: linear-gradient(to top, rgba(250, 190, 85, 1)5%, rgba(250, 190, 85, 0)75%); opacity: 0.85;}

2.把 index.wxml 下边这一部份内容开展拆换

 view template is="subject-name" data="{{name:'受欢迎强烈推荐',intro:'更便捷,快速的掌握大家的一切'}}" / view class="recoBox {{sticky.length==4?'rp4':sticky.length==5?'rp5':''}}" wx:if="{{sticky.length 0}}" navigator url="/pages/detail/detail?id={{item.id}}&src={{item.meta.thumbnail}}" data-id="{{item.id}}" data-index="{{index}}" wx:if="{{index 6}}" wx:for="{{sticky}}" wx:key="index" span {{item.title.rendered}} /span view class="linearMask {{index==0||index==2?'lm_1':index==3||index==5?'lm_2':'lm_3'}}" /view /navigator /view view class="recoBox {{stickynull.length==4?'rp4':stickynull.length==5?'rp5':''}}" wx:else view bindtap="bindTapAction" data-type="post" id="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" wx:if="{{index 6}}" wx:for="{{stickynull}}" wx:key="index" span {{item.title.rendered}} /span view class="linearMask {{index==0||index==2?'lm_1':index==3||index==5?'lm_2':'lm_3'}}" /view /view /view /view 

更换成下列內容

 scroll-view scrollX="{{true}}" navigator url="/pages/detail/detail?id={{item.id}}&src={{item.meta.thumbnail}}" data-index="{{index}}" wx:if="{{index 8}}" wx:for="{{sticky}}" wx:key="index" view class="linearMask {{index==0?'lm_1':index==1?'lm_3':index==2?'lm_1':index==3?'lm_3':index==4?'lm_1':index==5?'lm_3':index==6?'lm_1':index==7?'lm_3':'lm_1'}}" /view view /view view 受欢迎新闻资讯 /view view {{item.title.rendered}} /view view {{item.date}} /view /navigator /scroll-view 

喜爱这一款式的,能够自身动手能力改一改。

标识:手机微信微信小程序 5