《选中圆角样式之微信小程序》

背景

公司使用微信小程序来开发公司的一个产品，有幸参与到其中。在最近的一次迭代中，体验优化有这样一个点，现在总结下，属于打技术的地基：

技术方案

方案一：切图

可以将整体选中的样式作为背景图存在，不过这需要UI去切图，然后当做背景来设计。本身在做的时候，让UI进行切图，最终实现的效果不是很理想

方案二：使用伪类

一、wxml - 核心代码

<template>
    <view  wx:for="{{categorys}}" wx:key="categoryCityId" class="topC-leftNav-item {{item.categoryCityId === currentCategoryCityId? 'focus' : ''}}" id="category_{{item.id}}" catchtap="selectNav(item, index)">
        <view class="focus-slide"></view>
        <image class="topC-leftNav-item-icon" wx:if="{{item.iconUrl}}" src="    {{item.iconUrl}}"></image>
        <text>{{ item.name }}</text>
        <view class="corner top-corner"></view>
        <view class="corner bottom-corner"></view>
        </view>
</template>

二、wxss-核心代码

.topC-leftNav-item{
  .focus-slide{
    display: none;
  }
}
.corner{
  width: 24rpx;
  height: 24rpx;
  position: absolute;
  background: #fff;
  display: none
}
.bottom-corner{
  position: absolute;
  top: 100%;
  right: 0;
}
.top-corner{
  position: absolute;
  bottom: 100%;
  right: 0;
}
.focus{
  font-family: PingFangSC-Semibold;
  position: relative;
  color: #FF5E29;
  font-weight: bold;
  background: #fff;
  .corner{
    display: block;
  }
  .focus-slide {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8rpx;
    height: 40rpx;
    background: #FF5510;
    border-radius: 0 8rpx 8rpx 0;
  }
  &::before{
    content: " ";
    position: absolute;
    top: -24rpx;
    background: #f6f7fa;
    width: 24rpx;
    height: 24rpx;
    right: 0;
    border-bottom-right-radius: 100%;
    z-index: 2;
  }
  &::after{
    content: " ";
    position: absolute;
    bottom: -24rpx;
    background: #f6f7fa;
    width: 24rpx;
    height: 24rpx;
    right: 0;
    border-top-right-radius: 100%;
    z-index: 2;
  }
}

优势：

1、js比较干净，js中不掺杂样式的逻辑

劣势：

1、dom增加

2、css代码增加

方案三：定位相邻类目，切换圆角样式：index - 1 的元素右下角圆角， index + 1 的元素 右上角圆角

一、wxml - 核心代码

<template>
    <view wx:for="{{categorys}}" wx:key="categoryCityId" class="topC-leftNav-item {{item.categoryCityId === currentCategoryCityId? 'focus' : item.categoryCityId === lastCategoryCityId ? 'focus-last' : item.categoryCityId === nextCategoryCityId ? 'focus-next' : ''}}" id="category_{{item.id}}" catchtap="selectNav(item, index)">
        <image class="topC-leftNav-item-icon" wx:if="{{item.iconUrl}}" src="{{item.iconUrl}}"></image>
        <text>{{ item.name }}</text>
    </view>
</template>

二、wxss-核心代码

.topC-leftNav-item.focus-last
  font-family PingFangSC-Regular
  position relative
  color #666666
  background #F6F7FA
  border-bottom-right-radius 24rpx
.topC-leftNav-item.focus-next
  font-family PingFangSC-Regular
  position relative
  color #666666
  background #F6F7FA
  border-top-right-radius 24rpx
.topC-leftNav-item.focus
  font-family PingFangSC-Semibold
  position relative
  color #FF5E29
  font-weight bold
  background #fff
.topC-leftNav-item.focus:before
  content ' '
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  width 8rpx
  height 40rpx
  background #FF5510
  border-radius 0 8rpx 8rpx 0

三、wxs-核心代码

（1）当前类目选中的标识-currentCategoryCityId

（2）上一个类目标识：lastCategoryCityId

（3）下一个类目标识：nextCategoryCityId

（4）最后一个类目标识：bottomCategoryCityId

      selectNav(item, index) {
          // 计算纵向滚动位置
          this.computeMidScrollTop(index)
          this.currentCategoryCityId = `${item.id}_${item.cityId}`
          // 当前选中类目，相邻圆角样式所需信息
          this.getAdjacentInfo(index)
          const formatData = currentCategoryAdapte(item)
          classifyCase.setCurrentInfo(formatData)
          this.triggerEvent('selectNav', item)
      } 

    // 当前选中类目，相邻圆角样式所需信息
    getAdjacentInfo(index) {
      this.lastCategoryCityId = `${this.categorys[index - 1]?.id}_${this.categorys[index - 1]?.cityId}`
      this.nextCategoryCityId = `${this.categorys[index + 1]?.id}_${this.categorys[index + 1]?.cityId}`
      this.bottomCategoryCityId = `${this.categorys[this.categorys.length - 1]?.id}_${this.categorys[this.categorys.length - 1]?.cityId}`
    }

优势：

1、与第二种方案相比，dom减少，wxml比较干净

2、css代码减少，比较干净

劣势：

1、js中掺杂了css的业务逻辑，js不干净

思考

方案二和方案三实现的效果像素级还原UI，比较推荐，项目中最后采取的方案是方案二，虽然各有优劣，但回归初始，属于样式，可以直接用css实现的，没有必要掺杂在js业务逻辑里。