心悦琴 2022-02-22 12:31 采纳率: 87.7%
浏览 418
已结题

uni-app想要实现产品列表超过三个即收起,点击展开可查看更多的效果,该如何处理?

如图,

img

img


想要实现产品列表超过三个即折叠,点击展开可查看更多的效果,目前我是这么写的

<view class="depositList">
                    <view class="depositList_header">
                        <view class="depositList_title">明星存款</view>
                        
                    </view>
                    
                    <view class="depositList_content">
                        <view v-for="(item,index) in depositListData" :key="index"
                              @click="getDetails(item)"
                              class="depositList_item">
                        
                                <view class="content_left"  style="text-align: center;">
                                    <view class="annualRate_value">{{item.annualRate}}%</view>
                                    <view class="annualRate_text">满期利率</view>
                                </view>
                                
                                <view class="content_right" style="text-align: center;">
                                    <view class="depositName">{{item.name}}</view>
                                    <view class="depositDue" style="margin-top:3px">期限{{item.term}}</view>
                                </view>
                        
                            
                        </view>
                            
                        
                        <div v-if="depositListData.length > 3" @click="changeFoldState">
                                 <span>{{brandFold?'展开':'收起'}}</span>
                         </div>
                    
                    </view>
                </view>


<script>
    import { mapState,mapMutations} from 'vuex';  
    import { showProductByStatus } from '../../api/product.js';
    export default {
        
        data() {
        
            return {
                        imageAll: [
                             "../../static/swiperImg1.jpg",
                             "../../static/swiperImg2.jpg",
                             "../../static/swiper_3.jpg",
                             
                        ],
                        depositListData:[],
                        brandFold: true
                
            }
        },
        computed: {
            ...mapState({
              token: state => state.token,
             
            }),
            
            showDepositListData: {
               get: function () {
                  if (this.brandFold) {
                      if (this.depositListData.length < 4) {
                         return this.depositListData
                      }
                      let newArr = []
                      for (var i = 0; i < 3; i++) {
                          let item = this.depositListData[i]
                          newArr.push(item)
                       }
                       return newArr
                    }
                    return this.depositListData
                 },
                 set: function (val) {
                     this.showDepositListData = val
                 }
             }
                    
        },
        
        onLoad() {
                this.showProduct()
        },
        
        methods: {
            changeFoldState() {
                    this.brandFold = !this.brandFold
            },
            toLogin(){
                
                uni.navigateTo({
                     url: `/pages/login/index`,
                     fail (error) {
                             console.log(error)
                         }
                });
            },
            // item 为该列表的每一项的数据对象;encodeURIComponent 为uniapp 提供的api
            getDetails(item) {
                console.log("item:",item)
                uni.navigateTo({
                     url: `./depositDetail?item=${encodeURIComponent(JSON.stringify(item))}`,
                });
            },
            showProduct(){
                showProductByStatus('2').then(res=>{
                    
                     for(var i = 0; i < res.data.length; i++) {
                              // let item = {title: lists[i], name: items[i]}
                              // this.detailList.push(item)
                              
                              this.depositListData.push(res.data[i])
                    }
                    // console.log(this.detailList)
                    
                    
                    // this.depositListData=res.data
                    console.log("this.depositListData:",this.depositListData)
                })
                
            }
            
        }
    }
</script>


.depositList_title{
            font-size: 6vw;
            font-weight:600;
            position: absolute;
            top: 5px;
            left:8px;
            margin-bottom:5vw;
            
        }
        .depositList{
            padding: 10px;
            min-width:80vw;
            min-height:200px;
            margin-top: 10px;
            box-shadow: 0 0 5px #A6A6A6;
            border-radius:10px;
        }
        

有人有更好的方法吗?请赐教,不胜感激。

  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 3月4日
      • 已采纳回答 2月24日
      • 创建了问题 2月22日

      悬赏问题

      • ¥15 postman测试正常,在代码运行报错
      • ¥15 关于#C语言#的问题,如何解决?
      • ¥20 Vs2017 Help Viewer2.3 问题
      • ¥35 基于嵌入式linux的日程管理软件
      • ¥50 如何将list字符串添加到CSV文件表头?
      • ¥15 关于#javascript#的问题:通过ajax实现的局部刷新 如何将项目打包
      • ¥15 海思uboot USB3.0无法识别
      • ¥15 无法调用库文件,自己可以找到,但编译时显示没有
      • ¥15 安装PyQt5的时候这里创建虚拟环境是哪里?具体是怎么的?能录个视频吗
      • ¥20 php程序设计题不会!求解答!