Applet sliding, clicking and switching simple UI

List of articles

【 Zero foundation wechat applet introduction development 】 Small program introduction and environment construction
【 Zero foundation wechat applet introduction development 】 Configure applets
【 Zero foundation wechat applet introduction development 】 Applet framework 1
【 Zero foundation wechat applet introduction development 】 Applet framework 2
【 Zero foundation wechat applet introduction development 】 Basic ability （ One ）
【 Zero foundation wechat applet introduction development 】 Basic ability （ Two ）
Applet slide 、 Click to switch succinctly UI

Development encountered , Simply record , Slide the applet or click to switch styles

There's no demonstration here , Go straight to the code

wxml

<view>
    <!-- Tab Layout  -->
    <view class='navBox'>
        <view class='titleBox' bindtap='titleClick' data-idx='0'>
            <text class="{
    {0 == currentIndex ? 'fontColorBox' : ''}}"> Android </text>
            <hr class="{
    {0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
        </view>
        <view class='titleBox' bindtap='titleClick' data-idx='1'>
            <text class="{
    {1 == currentIndex ? 'fontColorBox1' : ''}}"> Apple </text>
            <hr class="{
    {1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
        </view>
    </view>
    <!--  Content layout  -->
    <swiper class='swiperTtemBox' bindchange='pagechange' current='{
    {currentIndex}}'>
        <swiper-item class='swiperTtemBox'>
            <view> Content 1</view>
        </swiper-item>
        <swiper-item class='swiperTtemBox'>
            <view> Content 2</view>
        </swiper-item>
    </swiper>
</view>

js

const app = getApp()
Page({
    
  data: {
    
    currentIndex: 0, // Default first 
  },
  pagechange: function (ee) {
    
    if ("touch" === ee.detail.source) {
    
      let currentPageIndex = this.data.currentIndex;
      currentPageIndex = (currentPageIndex + 1) % 2;
     
      this.setData({
    
        currentIndex: currentPageIndex,
      })
    }
  },

  // Click on tab Trigger when 
  titleClick: function (e) {
    
    this.setData({
    
      // Get the current index and change it dynamically 
      currentIndex: e.currentTarget.dataset.idx
    })
  },
})

Put the code you need to write in the content 1 Replace it , You can easily click or slide the switch window ,js Data interaction can be handled uniformly , The same load is just the layout of the display , Others are the same

️️️️️️ 🥳🥳🥳 Thousands of people , Thank you for reading my article at this moment , Thanks for watching , Hello, everyone , Welcome to the artificial intelligence exchange group （ Watch my news ）, More peripheral benefits are waiting for you 🥳🥳🥳

Welcome to subscribe to this column or follow me , Let's work together to solve an algorithm problem every day

️️️ Last , I hope my article can be helpful to your ！

I wish myself and you in the future , Keep learning , Keep improving , Keep loving , Go to the mountains and seas ！ ️️️