uni-app实现拼多多样式的拼单轮播功能

梦里梦外; 2022-12-27 11:18 170阅读 0赞

**uni-app实现拼多多样式的拼单轮播功能，一次显示两个用户拼单，上下轮播滚动一次加载一个用户**  
示例![在这里插入图片描述][20201210171656644.png]一次滚动一个用户

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]  
//附上代码

<swiper class="share-content" vertical="true" :autoplay="true" :interval="3000" :duration="500" style="height:200rpx;" display-multiple-items="2">
        <swiper-item v-for="(ne,index3) in collage" :key="index3" >
          <view class="swiper-item">
           <view class="share-one flex-between">
             <view class="share-left flex-start" v-if="ne">
                <image :src="ne.user.avatar" mode=""></image>
                <text>{
       {formatName(ne.user.nickname)}}</text>
              </view>
              <view class="share-right flex-start" v-if="ne">
                <view>
                  <view class="share-people">还差<text>1人</text>拼成</view>
                  <view class="share-pro">剩余23:12:11.2</view>
                </view>
                <view class="share-btn" @click="gobuy">去拼单</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>

// 拼单列表

collage:[
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          },
          {
            create_at:'2020-12-2 10:23',
            user:{
              avatar:'../../static/live/xuni.png',
              nickname:'紫卡萨丁'
            } 
          }  
        ]

// 姓名显示一字其他换成\*号的方法（在上面的用户昵称上面使用）

formatName(str) {
        return str[0]+ new Array(str.length).join('*');
      }

[20201210171656644.png]: /images/20221120/e7fe32f5e0e74a14a2f0a0d33c9d8f16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]: /images/20221120/e6ce8a63a38248718a5edecfcc0970fc.png