button样式无法改变

老师，我在练习的时候发现button的样式无法改变，该怎么处理？？

相关代码：

<view class="button" 
        wx:for="{{tabs}}"
        wx:key="type"
        data-type="{{item.type}}"
        hidden="{{type !== item.type }}">
<button style="margin: 30rpx;0" type="default"
        class="buttom-item buttom-item-{{item.type}}"
        formType="submit" 
        >{{item.name}}
</button>
</view>

.button{
width: 600rpx;
height: 100rpx;
}
.button-item-Text_cleaner {
background-color: #7bbfea !important;
}
.button-item-word_tokenize {
background-color: #ffd400;
}
.button-item-Bags_of_word {
background-color: #45b97c;
}
.button-item-TF-IDF {
background-color: #f58f98;
}
.button-item-generate_wordcloud {
background-color: #f36c21;
}

相关截图：

亨heng 2021-06-02

源自：慕课小程序实战开发 2-1 Tab切换菜单的制作

收起

2回答

好帮手慕言回答被采纳获得+3积分 2021-06-03 10:27:23

同学你好，同学是提供了一部分代码，js文件没有提供，所以没有tabs数据，所以老师在测试的时候就去掉了，如下：

从上图可以看出样式是生效的，另外：按钮本身是有默认样式的，建议：在设置样式时可以提升选择器的权重，也可以在样式后面加!important。如果同学那边测试还是不可以的话，建议把js代码也粘贴上来，老师帮助排查。

祝学习愉快~

收起回答

亨heng 提问者 #1

老师，我试了一下还是不行，是不是在form表单中button就无法修改背景颜色啊
<view class="container container1">
<view class="page-body">
<view class='form'
wx:for="{{tabs}}"
wx:key="type"
data-type="{{item.type}}"
hidden="{{type !== item.type }}"
>
<form catchsubmit="formSubmit">
<view class="input"
>
<textarea maxlength="-1" auto-height placeholder="{{item.content}}" name="textarea" placeholder-style="font-size:30rpx" />
</view>

<view class="button" >
<button style="margin-top:20rpx; margin-left:0; width:660rpx;" type="default"
class="buttom-item buttom-item-{{item.type}}"
formType="submit"
>
{{item.name}}
</button>
</view>
</form>
</view>
</view>
</view>

2021-06-03 19:50:23
亨heng 提问者 #2

.container{
position: relative;
display: flex;
flex-direction: column;
flex-wrap:wrap;
margin-bottom: 6rpx;
}
.page-body{
position: absolute;
top: 30rpx;
}
.form{
display: flex;
flex-direction: column;
}
.input{
width: 600rpx;
min-height: 200rpx;
border: 1rpx solid;
padding: 10rpx 20rpx;
margin-top: 10rpx;
margin-left: 10rpx;
}
.input textarea{
width: 100%;
font: 30rpx sans-serif;
}
.buttom-item {
width: 600rpx;
height: 80rpx;
margin-top: 15rpx;
}
.button-item-Text_cleaner {
background-color: #7bbfea !important;
}
.button-item-word_tokenize {
background-color: #ffd400 !important;
}
.button-item-Bags_of_word {
background-color: #45b97c !important;
}
.button-item-TF-IDF {
background-color: #f58f98 !important;
}
.button-item-generate_wordcloud {
background-color: #f36c21 !important;
}

2021-06-03 19:51:28
亨heng 提问者 #3

Page({

data: {
type:"Text_cleaner",
type_button:"Text_cleaner",
text_input:undefined,
text_processed:undefined,
tabs:[
{name:'文本清理',type:'Text_cleaner',content:"请输入需要清理的文本^ - ^"},
{name:'文本分词',type:'word_tokenize',content:"请输入分词的文本^ - ^（样式：['秋天的后半夜月亮下去了太阳还没有出只剩下一片乌蓝的天', '除了夜游的东西什么都睡着', '华老栓忽然坐起身擦着火柴点上遍身油腻的灯盏茶馆的两间屋子里便弥满了青白的光']）"},
{name:'生成词袋',type:'Bags_of_word',content:"请输入需要转化为词袋的文本^ - ^（样式：['秋天的后半夜月亮下去了太阳还没有出只剩下一片乌蓝的天', '除了夜游的东西什么都睡着']）"},
{name:'词频-逆向文件频率',type:'TF-IDF',content:"请输入需要计算词频-逆向文件频率的文本^ - ^（样式：['秋天的后半夜月亮下去了太阳还没有出只剩下一片乌蓝的天', '除了夜游的东西什么都睡着', '华老栓忽然坐起身擦着火柴点上遍身油腻的灯盏茶馆的两间屋子里便弥满了青白的光']）"},
{name:'生成词云',type:'generate_wordcloud',content:"请输入需要生产词云的文本^ - ^（样式：['秋天的后半夜月亮下去了太阳还没有出只剩下一片乌蓝的天', '除了夜游的东西什么都睡着', '华老栓忽然坐起身擦着火柴点上遍身油腻的灯盏茶馆的两间屋子里便弥满了青白的光']）"},
]
},

changeType(e){
const type = e.currentTarget.dataset.type;
const type_button = e.currentTarget.dataset.type
this.setData({ type, type_button })
},
onShareAppMessage() {
return {
title: 'form',
path: 'page/component/pages/form/form'
}
},

formSubmit(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
})

2021-06-03 19:53:35