微信小程序框架wepy之动态控制类名

控制类名

• style

<style lang="less" scoped>
    .liBkgCor {
      background-color: red;
    }
style>

• template

<view class="t_tab">
  <li @tap.stop="changeLi({{1}})" class="{{ liColor == 1 ? 'liBkgCor':'' }}">推荐li> 
  <li @tap.stop="changeLi({{2}})" class="{{ liColor == 2 ? 'liBkgCor':'' }}">洗手台li> 
  <li @tap.stop="changeLi({{3}})" class="{{ liColor == 3 ? 'liBkgCor':'' }}">淋浴li>
  <li @tap.stop="changeLi({{4}})" class="{{ liColor == 4 ? 'liBkgCor':'' }}">马桶li>
view>

• script

    data = {
      liColor:1  //默认让第一个tab高亮
    }
    methods = {
      changeLi(e){
        this.liColor = e.target.dataset.wepyParamsA 
        this.$apply()  //通知wepy框架data数据更改需要重绘页面
      }
    }

• 效果图