微信小程序如何自己手写选项卡?

人间四月天,有你才值得

谢谢你来到我的生命中,陪伴我走过那段最美好的岁月

谢谢你在我的生命里,给过我的力量和温暖

谢谢你存在过,活过,爱过,离开过

微信小程序如何自己手写选项卡?

唠叨一会

四月是一个忙碌的季节,忙碌之后水水文章。微信小程序如何自己手写选项卡?我之前是真的不会,若不是遇到codezen现在的我还在使用ui框架或者插件

我们就用新版UI来作为案例,我们先看界面

微信小程序如何自己手写选项卡?

思路

1.我们首先要模拟一个数据,数据里面有3个标题和3个内容选项卡

2.要点击和未点击两种状态,一行里面有多个选项卡采用flex布局

3.我们点击某个选项卡的时候要切换状态和内容,且页面加载默认选中第一个

用到语法

wx:for以及三木运运算

步骤

1.通过思路我们得知我们的模拟两个数据,一个是选项卡内容数据,一个是默认值数据,我们在微信小程序js文件中编辑字段

// 选项卡数据 利用key代替索引 方便跳转
      select:[
        {title:'用户协议',content:'我之前认为成熟应该是要会什么,要做些什么,或者能处理些什么,而作者做法是“放弃”,好奇的是为什么是放弃,而不是接受呢'},
        {title:'隐私政策',content:'当我们的地图变得狭小,模糊,粗略就会导致对现实的认知过于狭隘和偏激。因此我们应该继续努力,不停探索。扩大和更新自己世界的认知;'},
        {title:'免责声明',content:'世界不停变化,冰川来临,继而消退;文化出现,随即消失,技术有限,技术似乎又无限……'},
      ],
      //初始默认值
      active:'treaty',

2.使用flex布局写好界面,同时写好点击和不点击两种状态class


//wxml代码
<view class="select">
      <view class="sselect-btn-select">
        我是点击选中状态
      </view>
      <view class="select-btn">
        我是未点击不选中状态
      </view>
</iew>

//wxss 代码
/* 选项卡 */
.select{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120rpx;
}
.select-btn{
  background-color: #dedede;
  border-radius: 100rpx;
  border: solid 2rpx #dedede;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  padding: 20rpx 40rpx;
  margin: 0 16rpx;
}
.select-btn-select{
  background-color: #2f8fff;
  box-shadow: 0rpx 6rpx 12rpx 0rpx 
    rgba(0, 0, 0, 0.16);
    border-radius: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  padding: 20rpx 40rpx;
  margin: 0 16rpx;
}
.select-content{
  margin: 76rpx 48rpx;
  color: #898989;
  line-height: 60rpx;
  font-size: 28rpx;
}

3.随后我们要使用wx:for 循环遍历出标题,且添加一个点击事件

<view class="select">
    <block wx:for="{{select}}" wx:key="inex">
      <view class="select-btn" bindtap="selectTap" data-index="{{index}}">
              {{item.title}}
      </view>
    </block>
</view>

4.点击事件传入选项卡的索引值,将值赋值给active

// 选项卡点击事件
  selectTap(e){
    this.setData({
      active:e.currentTarget.dataset.index
    })
    console.log(e)
  },
微信小程序如何自己手写选项卡?

5.最后使用三目运算,如果点击选项卡的索引值和active值对比,如果相同就切换为选中样式,如果不同就是不选中样式

<view class="select">
    <block wx:for="{{select}}" wx:key="inex">
      <view class="{{active === item.key ? 'select-btn-select' : 'select-btn'}}" bindtap="selectTap" data-index="{{index}}">
        {{item.title}}
      </view>
    </block>
  </view>

文章封面图片下载地址

https://banner.frbkw.com

(1)
上一篇 04/06/2022
下一篇 04/23/2022

相关推荐

发表评论

您的电子邮箱地址不会被公开。

星宿UI 官方文档上线:https://xs.frbkw.com/ 
自己画的banner插画开源下载:https://banner.frbkw.com/