uni-app根据swiper实现左右滑动切换

最新推荐文章于 2024-09-24 14:18:19 发布

weixin_47478730

最新推荐文章于 2024-09-24 14:18:19 发布

阅读量2k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_47478730/article/details/122896202

版权

此代码段展示了一个使用Vue.js和uni-app框架的组件，实现了内容区域固定在顶部的吸顶效果，以及下部的轮播商品列表。每个列表包含了多个品牌，每个品牌下有多个商品，点击商品可以跳转到详细页面。同时，通过`getbrand`方法从后台获取不同分类的商品数据，并动态填充到相应的列表中。

摘要由CSDN通过智能技术生成

<template>
   <view>
       <u-sticky class="srickTop">
           <u-tabs style="background-color: #F5F5F5;height: 110rpx;" :list="list1" :current="current"
               :scrollable="true" @change="switchtab"></u-tabs>
       </u-sticky>
       <view class="home-news">
           <swiper :current="navIndex" :style="'height:'+scrollHeight+'px!important;'" @change="change">
               <swiper-item :style="'height:'+scrollHeight+'px!important;'">
                   <scroll-view :style="'height:' + scrollHeight + 'px!important'" scroll-x="false" scroll-y="true">
                       <view v-for="(item, index) in homenewslist0">
                           <view class="title">
                               {{item.name}}
                           </view>
                           <view class="brand-list">
                               <view class="brand-list-info" v-for="key in item.data" @click="gotospring(item)">
                                   <view>
                                       <image :src="key.nvcCompanyLogo" mode="widthFix"></image>
                                   </view>
                                   <text>{{key.nvcProductSmallTypeName}}</text>
                               </view>
                           </view>
                       </view>
                   </scroll-view>
               </swiper-item>
               <swiper-item :style="'height:'+scrollHeight+'px!important;'">
                   <scroll-view :style="'height:' + scrollHeight + 'px!important'" scroll-x="false" scroll-y="true">
                       <view v-for="(item, index) in homenewslist1">
                           <view class="title">
                               {{item.name}}
                           </view>
                           <view class="brand-list">
                               <view class="brand-list-info" v-for="key in item.data" @click="gotospring(item)">
                                   <view>
                                       <image :src="key.nvcCompanyLogo" mode="widthFix"></image>
                                   </view>
                                   <text>{{key.nvcProductSmallTypeName}}</text>
                               </view>
                           </view>
                       </view>
                   </scroll-view>
               </swiper-item>
               <swiper-item :style="'height:'+scrollHeight+'px!important;'">
                   <scroll-view :style="'height:' + scrollHeight + 'px!important'" scroll-x="false" scroll-y="true">
                       <view v-for="(item, index) in homenewslist2">
                           <view class="title">
                               {{item.name}}
                           </view>
                           <view class="brand-list">
                               <view class="brand-list-info" v-for="key in item.data" @click="gotospring(item)">
                                   <view>
                                       <image :src="key.nvcCompanyLogo" mode="widthFix"></image>
                                   </view>
                                   <text>{{key.nvcProductSmallTypeName}}</text>
                               </view>
                           </view>
                       </view>
                   </scroll-view>
               </swiper-item>
               <swiper-item :style="'height:'+scrollHeight+'px!important;'">
                   <scroll-view :style="'height:' + scrollHeight + 'px!important'" scroll-x="false" scroll-y="true">
                       <view v-for="(item, index) in homenewslist3">
                           <view class="title">
                               {{item.name}}
                           </view>
                           <view class="brand-list">
                               <view class="brand-list-info" v-for="key in item.data" @click="gotospring(item)">
                                   <view>
                                       <image :src="key.nvcCompanyLogo" mode="widthFix"></image>
                                   </view>
                                   <text>{{key.nvcProductSmallTypeName}}</text>
                               </view>
                           </view>
                       </view>
                   </scroll-view>
               </swiper-item>
           </swiper>

</view>
</view>
</template>

   import {
       getbrandDisplayList
   } from '../../config/api/index.js';
   export default {
       data() {
           return {
               current: 0,
               list1: [{
                   name: '耐火原料',
                   id:0
               }, {
                   name: '耐火制品',
                   id:1
               }, {
                   name: '冶金辅料',
                   id:2
               }, {
                   name: '生产装备',
                   id:3
               }],
               homenewslist0: [

               ],
               homenewslist1: [

               ],
               homenewslist2: [

               ],
               homenewslist3: [

               ],
               scrollHeight: '',
               navIndex: 0,
           };
       },
       computed: {

       },
       onReady() {
           let _this = this;
           uni.getSystemInfo({//获取信息
               success: function(res) {
                   _this.bodyHeight = res.windowHeight;
                   let obj2 = uni.createSelectorQuery().select('.srickTop');
                   obj2.boundingClientRect(function(data) {
                       console.log(data);
                       _this.scrollHeight = _this.bodyHeight - data.height - 20;
                   }).exec();
               }
           });
       },
       onLoad() {
           this.getbrand("耐火原料")
           this.getbrand("耐火制品")
           this.getbrand("冶金辅料")
           this.getbrand("生产装备")
       },
       methods: {
           change(e) {
               console.log(e)
               this.current = e.detail.current;
               this.navIndex = e.detail.current;
           },
           switchtab(index) {
               this.navIndex = index.id;
           },
           getbrand(name) {
               let parms = {
                   nvc_product: name
               }
               接口(parms).then(res => {
                   if (res.success == true) {
                       var that = this
                       const brandlist = []
                       for (var key in res.data) {
                           let obj = {
                               name: key,
                               data: res.data[key]
                           }
                           brandlist.push(obj) //获取key值
                       }
                       if(name=="耐火原料"){
                           that.homenewslist0 = brandlist;
                       }else if(name=="耐火制品"){
                           that.homenewslist1 = brandlist;
                       }else if(name=="冶金辅料"){
                           that.homenewslist2 = brandlist;
                       }else{
                           that.homenewslist3 = brandlist;
                       }
                   } else {}
               }).catch(errors => {

               })
           },
           //品牌详情
           gotospring(url) {
               uni.navigateTo({
                   url: "/pages/webview/webview?webviewUrl=" + url.data[0].nvcLink
               })
           }
       }
   };
</script>