小程序社区版热门推荐自定义样式

更新时间：2024-03-16 分类：小程序 浏览量：3279

丸子社区热门推荐主要是以文字为主，缩略图作为背景图并模糊化，右边文字模块又太小，显示不全，可能不是那么受欢迎，因此，群友 @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('http://q5w2n57jq.bkt.clouddn.com/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 class="section">
  <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}}" class="recommend" data-id="{{item.id}}" data-index="{{index}}" style="background:url({{item.meta.thumbnail}}) 0 0/100% 100% no-repeat" wx:if="{{index<6}}" wx:for="{{sticky}}"
      wx:key="index">
      <span class="recoTitle">{{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}}" class="recommend" data-id="{{item.id}}" data-index="{{index}}" style="background:url({{item.meta.thumbnail}}) 0 0/100% 100% no-repeat" wx:if="{{index<6}}" wx:for="{{stickynull}}" wx:key="index">
      <span class="recoTitle">{{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 class='scroll_box' scrollX="{{true}}">
<navigator url="/pages/detail/detail?id={{item.id}}&src={{item.meta.thumbnail}}" data-index="{{index}}" style="background:url({{item.meta.thumbnail}}) center/auto 100% no-repeat" wx:if="{{index<8}}" wx:for="{{sticky}}" wx:key="index" class='gundong'>
<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 class="re"></view>
      <view class="mulu">热门资讯</view>
      <view class="recoTitle">{{item.title.rendered}}</view>
      <view class="time">{{item.date}}</view>
</navigator>
</scroll-view>

喜欢这个样式的，可以自己动手改一改。

标签：