我的远程实习笔记day19---吃喝玩乐项目（特色按钮）-CSDN博客

本文链接：https://blog.csdn.net/wendyzhouwendy/article/details/129768659

今天是在第二大学远程实习的第十九天，偷偷发个博客记录一下自己的成长哈哈（今天学习吃喝玩乐项目）
（1）wxml页

<!-- 上方的两个切换页面的按钮 -->
  <view class="XuanzeAnniu">
    <view bindtap="YonghuTuijian" style="background-color:{{BeijingYanse1}};color:{{WenziYanse1}};">用户推荐</view>
    <view bindtap="ZhoubianShiyu" style="background-color:{{BeijingYanse2}};color:{{WenziYanse2}};">周边食娱</view>
  </view>

（2）js页

 // 选择页面为用户推荐页
  YonghuTuijian(){
    this.setData({
      Liebiao:'用户推荐',
      BeijingYanse1:'#FF6E00',
      WenziYanse1:'#fff',
      BeijingYanse2:'',
      WenziYanse2:'',
    })
  },
  // 选择页面为周边食娱
  ZhoubianShiyu(){
    var that =this;
    that.setData({
      Liebiao:'周边食娱',
      BeijingYanse1:'',
      WenziYanse1:'',
      BeijingYanse2:'#33A6FF',
      WenziYanse2:'#fff',
    })

（3）wxss页

/* 选择页面按钮部分 */
.XuanzeAnniu{
  width: 100%;
  height: 70rpx;
  display:flex;
  margin-bottom: 2%;
}
.XuanzeAnniu view{
  font-size: 35rpx;
  width: 50%;
  background-color: aliceblue;
  display: flex;
  justify-content: center;
  line-height:70rpx;
  border-radius:20rpx ;
}
.XuanzeAnniu view:nth-child(1){
  margin-right: 1%;
}