uniApp实现上下联动

<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

   }

uniApp实现上下联动相关推荐

uniapp 鸿蒙,关于前端:uniapp项目安装运行操作手册
一,装置运行环境 1.下载node.js node.js下载链接node.js 请下载长期反对版. 2.装置node.js 装置教程百度可查这里就不具体阐明了,装置教程地址链接 3.验证node是否装 ...
uniapp 中如何使用echart_uniapp中如何引用echarts
uniapp引用echarts的方法:1.通过uni-app官网直接安装echarts插件生成echarts项目模板:2.创建一个新的hello uni-app项目模板:3.把echarts放到com ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
uniapp兼容H5和小程序订阅消息授权开发封装，使用方便
本文使用 uniapp 框架开发,因为H5的订阅消息和小程序的订阅消息的授权流程不一样,但是很多地方需要使用授权,所以我封装了一个兼容H5和小程序订阅消息授权的方法,使用比较方便,希望能够帮助到你,实 ...
uniapp（一）项目架构，封装
前言: 最近需要搭建一套基于uniapp 的代码模板,适应各平台的快速打包部署,为提高代码复用率,提升生产力,所以需要构建一套优雅的前端项目架构,下面分享记录一下我的封装. 代码封装我暂时分为三个层面 ...
mpvue 转uniapp 导航栏样式错乱问题修复 tabbar 样式修复
效果图:修改前,修改后找了半天没找到原因,只能自己改样式了,下面是样式代码(在app.vue 里面加上就行) <style>/*每个页面公共css */uni-tabbar {box-s ...
mpvue 转uni-app 操作记录
1.创建一个uni-app 的项目,把原有的mpvue项目手动迁移过来 2.用到mpvue特性的代码,需要修改成uni-app 兼容的,例如 mpvue-wxparse 可以修改成 3.src/app ...
封装 localStorage 缓存，兼容网页，微信小程序，uni-app
封装的缓存功能,兼容网页,微信小程序,uni-app 使用,支持设置缓存,获取缓存,移除缓存,清空缓存,设置缓存时间,分组缓存设置. 把最下面的 Str4.js 代码拷贝到项目内可以直接使用,调用方式 ...
来客推商城V3多用户uni-app商城源码如何搭建？盈利模式怎么样的？
双11马上又要到了,今年的我们打工人又要把为数不多的余额交给马爸爸,从10月中旬开始就是集体变成尾款人.双11电商平台现在可谓百花齐放,我们一般都会去淘宝,天猫,京东等大型电商平台,那么大家想过没有, ...

uniApp实现上下联动

uniApp实现上下联动相关推荐

最新文章

热门文章