以下是小程序 动态绑定 class 样式
效果图
- 先写一个改变之后的样式
.active {
border-bottom: 2px solid #f00;
color: red;
}
- 在xxx.js 里边写下要点击的下边
data: {
currentIndex:0,
}
- 在 view 里边写 class 样式
<view
wx:for="{{label}}"
wx:key="{{index}}"
class="{{index==currentIndex? 'active':''}}"
data-index="{{index}}"
catchtap="changeFn"
>
<view>{{item}}</view>
</view>
- 点击 changeFn 实现点击跳转
// 标签切换
changeFn(e){
console.log(e);
let {index} = e.currentTarget.dataset;
this.setData({
currentIndex:index
})
},
onLoad: function (options) {
console.log(options.index);
this.setData({
currentIndex:options.index
})
console.log(this.data);
},
以上就实现点击 切换 样式
以下是vue - 动态绑定class
- template部分:
<div>
主题分类:
<div v-for="(item,index) in subject" :key="index">
<div :class="currentIndex===index?'current':''" @click="right(index)">{{item.name}}</div> // 这一步是动态绑定class
</div>
</div>
<div>
主题细节:
<div v-for="(item,index) in detail" :key="index">
<p class="subjectItem">{{item.name}}</p>
</div>
</div>
- script部分:
data() {
return {
subject: [
{
name: "全部",
tag: "all",
},
{
name: "HTML语言",
tag: "html",
},
{
name: "CSS技术",
tag: "css",
},
{
name: "Javascript",
tag: "js",
},
{
name: "前端框架",
tag: "front",
},
{
name: "后台框架",
tag: "back",
},
{
name: "数据库",
tag: "database",
},
],
detail: [
{
name: "HTML",
tag: "html",
},
{
name: "HTML5",
tag: "html",
},
{
name: "CSS",
tag: "css",
},
{
name: "CSS3",
tag: "css",
},
{
name: "Js语法基础",
tag: "js",
},
{
name: "DOM文档对象模型",
tag: "js",
},
{
name: "面向对象的程序设计",
tag: "js",
},
{
name: "Vue.js",
tag: "front",
},
{
name: "Bootstrap",
tag: "front",
},
{
name: "Node.js",
tag: "front",
},
{
name: "Express",
tag: "front",
},
{
name: "PHP",
tag: "back",
},
{
name: "JSP",
tag: "back",
},
{
name: "Java",
tag: "back",
},
{
name: "MySQL",
tag: "database",
},
{
name: "mongDB",
tag: "database",
},
],
currentIndex: 0,
};
},
methods: {
right(index) {
console.log(index);
this.currentIndex = index
},
},
<div class="van-tab">
<div v-for="(item,index) in tabList" :key="index">
<div :class="currentIndex===index?'active':''" @click="onTab(index)">{{item.name}}</div>
<span :class="currentIndex===index?'line':''"></span>
</div>
</div>
<script>
export default {
data() {
return {
tabList: [{
name: "正在抢购",
},
{
name: "活动预告",
},
],
currentIndex: 0,
}
},
onLoad() {
},
methods: {
onTab: function(e) {
this.currentIndex = e
},
}
}
</script>
<style scoped>
.van-tab {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 27rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #252729;
padding: 47rpx 207rpx 0;
}
.van-tab>div {
height: 45rpx;
}
.van-tab .active {
font-weight: 600;
color: #09BAA7;
}
.van-tab .line {
margin: 7rpx auto 0;
display: inherit;
width: 24rpx;
height: 5rpx;
background: #09BAA7;
border-radius: 4rpx;
}
</style>