【微信小程序】黑马优购--12意见反馈

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: 70r