uniApp实现上下联动

最新推荐文章于 2024-04-10 16:48:14 发布

ঞৣ忘ོ忧༊°

最新推荐文章于 2024-04-10 16:48:14 发布

阅读量299

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_70032683/article/details/127721516

版权

<view>
   
   <view class="flex flex-row mt-2" >
       <view v-for="(item,index) of tabList" :key="index" class="flex-1 text-center font-weight-bold" :class="tabIndex == index?'text-main font-lg ':'text-dark font-md'" @click="changeTab(index)">{{item.name}}</view>
   </view>
   
   <swiper :current="tabIndex" :style="'height:'+scrollH+'px;'" @change="change">
      <swiper-item v-for="(item,index) of tabList" :key='index'>
          <block v-for="(inneritem,innerindex) of friendsList" :key='innerindex' >
          <view class="flex flex-row p-2 border-bottom align-center" >
   <image :src="item.avatar" style="width: 82rpx; height: 81rpx;" class="rounded-circle"></image>
   <view class="pl-2 w-100">
      <view>{{item.name}}</view>
      <view class="minBg text-white text-center flex justify-center align-center" style="width: 80rpx; height: 40rpx; border-radius: 20rpx;">
          <text class="iconfont icon-nv font-smaller"></text>
          <text>{{item.age}}</text>
      </view>
   </view>
   <view class=" flex justify-end rounded-circle bg-secondary" style="width: 50rpx; height: 50rpx;">
      <text class="uni-icon uni-icon-checkbox-filled text-light"></text>
   </view>
</view>
          </block>
      </swiper-item>
   </swiper>

</view>
   //js部分
data() {
       return {
           scrollH:'',
           tabIndex: 1,
           tabList: [{
               name: '互关',
               id: 0
           }, {
               name: '关注',
               id: 0
           }, {
               name: '粉丝',
               id: 0
           }],
           friendsList: [{
                   avatar: '../../static/2.jpg',
                   name: 'Heroine',
                   age: 21,

               },
               {
                   avatar: '../../static/2.jpg',
                   name: 'Heroine',
                   age: 21,

               }, {
                   avatar: '../../static/2.jpg',
                   name: 'Heroine',
                   age: 21,

               } , {
                   avatar: '../../static/2.jpg',
                   name: 'Heroine',
                   age: 21,

               }
           ]
       }
   },
   **//js部分**
   onLoad(){
       const that = this
       uni.getSystemInfo({
       success: function (res) {
               console.log('res',res)
       that.scrollH = res.windowWidth
       }
       });
   },
   methods: {
       //切换tab
       changeTab(index){
           console.log(index,'index')
           this.tabIndex = index
       },
       //swiper部分滑动
       change(e){
           let index = e.detail.current
           this.changeTab(index)
       }8

   }