14.意见反馈页
14.1引入tabs组件
首先新建意见反馈页面feedback,然后个人中心页面加导航跳转
<navigator url="/pages/feedback/feedback" class="app_info_item">意见反馈</navigator>
在JSON中引入tabs组件
{
"usingComponents": {"Tabs":"../../components/Tabs/Tabs"},
"navigationBarTitleText": "意见反馈"
}
在wxml中
<!--pages/feedback/feedback.wxml-->
<Tabs tabs="{
{tabs}}" bindtabsItemChange="handletabsItemChange">
内容
</Tabs>
在js中
// pages/feedback/feedback.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
value:"体验问题",
isActive:true
},
{
id:1,
value:"商品、商家投诉",
isActive:false
}
],
},
// 标题点击事件 从子组件传递过来
handletabsItemChange(e){
// console.log(e);
// 1 获取被点击的标题索引
const {index}=e.detail;
// 2 修改源数组
let {tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
},
})
14.2静态结构
<!--pages/feedback/feedback.wxml-->
<Tabs tabs="{
{tabs}}" bindtabsItemChange="handletabsItemChange">
<view class="fb_main">
<view class="fb_title">问题的种类</view>
<view class="fb_tips">
<text>功能建议</text>
<text>购买遇到问题</text>
<text>性能问题</text>
<text>其他</text>
</view>
<view class="fb_content">
<textarea placeholder="请描述一下您的问题"></textarea>
<view class="fb_tool">
<button>+</button>
</view>
</view>
<view class="form_btn_wrap">
<button>
<icon type="success_no_circle" size="15" color="white"></icon>
提交
</button>
</view>
</view>
</Tabs>
/* pages/feedback/feedback.wxss */
page{
background-color: #eeeeee;
}
.fb_main{
padding: 20rpx;
color: #666;
}
.fb_tips{
display: flex;
flex-wrap: wrap;
}
text{
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 15rpx 10rpx;
}
.fb_content{
background-color: #fff;
margin-top: 20rpx;
}
textarea{
padding: 10rpx;
}
.fb_tool{
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
}
.fb_tool button{
/* button样式后面要加! important */
/* 取消默认margin*/
margin: 0! important;
width: 90rpx! important;
height: 90rpx;
font-size: 40rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx! important;
color: #ccc;
}
.form_btn_wrap{
margin-top: 20rpx;
}
.form_btn_wrap button{
width: 20%! important;
height: 70rpx;
/* 取消默认padding */
padding: 0;
margin-right: 0! important;
color: