小程序template页面模版, 单选框选项

小程序css样式设计

需求：有四个单选框，被选中项样式变化

wxml页面：

<view style="display:flex;flex-direction:row;justify-content:space-start" >

        <view  style=" background: #F2F2F2;border-radius:3rpx;width:122rpx;height:48rpx;margin-left:24rpx;text-align:center;line-height:48rpx;color:#696A69"wx:for="{{items}}"bindtap="varystyle" data-danxuanzhi="{{item.value}}" data-idx="{{index}} " class=" item {{currenttab==index? 'active':' '}}" hidden="{{item.hidden}}"> 
            <view style="{{currenttab==index? 'background:white':' '}}">
                 <text class="{{currenttab==index?'textstyle':''}}">{{item.name}}</text>
            </view>
          </view>
 </view>

js文件：

 currenttab:0,//这个用来设置选中的文章类型
 items: [//控制四个单选框的值
           { name: "全部", value:"all"},//去掉了hidden属性在熏染的时候就没有这个数据，就
           { name: "FAQ", value:"FAQ",hidden:"true"},
           {name: "方案",  value:"方案",hidden:"true"},
           {name: "资质",  value:"资质",hidden:"true"},
           {name: "手册",  value:"手册",hidden:"true"} ]
          /**
           *文章类型变化。
           */
   varystyle:function(e){
             var clickvalue=e.currentTarget.dataset.idx
             this.setData({
                       currenttab:clickvalue
             })
    },


css样式文件:
四个框公有样式：
 .item{
     font-family: PingFangSC-Medium;
     font-size: 26rpx;
     line-height: 20rpx;
}
文字样式的变化：（这几行决定只让文字产生渐变效果，）
.textstyle{
    background-image: -webkit-linear-gradient(right,rgba(22,148,241,1), rgba(43,197,245,1));
    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 }

点击某个框时样式变化：

.active{

  background-clip:padding-box,border-box;
  background-origin:padding-box,border-box;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#5c5fa5,#893f60);
  font-family: PingFangSC-Medium;
  font-size: 26rpx;
  border:1px solid;
  border-image: linear-gradient( rgba(22,148,241,1) , rgba(41,185,248,1))10 10;//让边框产生渐变效果
  line-height: 20rpx;
  color: #18A1F0;
  background:red;
}

--------------------------------------------------------------

想法：template模版，引入第三方，我的理解是使用已有语法单元完成一个功能需要的工作量很大时，就可以引入新的抽象程度更高的语法机制，把这个大功能块封装起来，

页面模版template也是这样
template模版文件的编写方式分为wxml文件和wxss文件


当然template文件name就是指代这个功能块，之后使用的时候就用is来指代这个template，

template中需要的数据须在引用页面的js文件的data中进行赋值

比如说上边的例子，

使用templage模版的页面用<import src="../___/___.wxml">  （后边应该加上.wxml后缀名）

同样的 @import "../___/___.wxss"（后边应该加上.wxss后缀名）