丸子小程序社區版熱門推薦自定義樣式

丸子社區熱門推薦主要是以文字為主,縮略圖作為背景圖并模糊化,右邊文字模塊又太小,顯示不全,可能不是那么受歡迎,因此,群友 @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>

喜歡這個樣式的,可以自己動手改一改。

相關推薦

2 條評論

  1. 思拓黃浩

    贊,真好看!

  2. 吳浩霖

    Mark

發表評論

微信掃一掃

微信掃一掃

微信掃一掃,分享到朋友圈

丸子小程序社區版熱門推薦自定義樣式
返回頂部

顯示

忘記密碼?

顯示

顯示

獲取驗證碼

Close
体彩6场半全场胜负投注