鸡汤来咯开发学习笔记-8

1.swiper轮播，进度条的进度控制

 <view class="progress">
         <view class="line" :style="{width:lineWidth+'%'}"></view>
     </view>

样式的宽度也就是进度改为变量控制

<swiper vertical @change="swiperChange">
            <swiper-item v-for="(item,index) in listData" :key="index">

在轮播器上加入change事件，和listData的变量，来获取控制轮播器当前页面的参数

<script setup>
import { computed, ref } from 'vue';

const listData = ref([1,2,3,4,5]);
const currentIndex =ref(0);

//轮播切换事件
const swiperChange =(e)=>{

currentIndex.value=e.detail.current
 }
 //进度条宽度
const lineWidth = computed(()=>currentIndex.value/(listData.value.length-1)*100)
//用computed来进行复杂运算并获取计算值


</script>

在script中加入方法，获取linewidth的值

2.增加广告位，所以上面的length-1的-1可以去掉，因为增加了一个页面了

.ad{
                background: #f8f8f8;
                padding:100rpx 30rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                text-align: center;
                .message{
                    background: #fff;
                    border-radius: 30rpx;
                    padding: 40rpx;
                    
                    .title{
                        font-size: 46rpx;
                        padding-bottom: 20rpx;
                        border-bottom: 1rpx solid #eee;
                        margin-bottom: 20rpx;
                        
                    }
                    .des{
                        font-size: 32rpx;
                        color: #555;
                        
                        line-height: 1.8em;
                    }
                    
                }
                .btnGroup{
                    font-size: 30rpx;
                    .btn{
                        width: 400rpx;
                        height: 100rpx;
                        border-radius: 100rpx;
                        background: linear-gradient(to top,#93c4ff,#b1e1ff);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 38rpx;
                        color: #203e5f;
                        margin-bottom: 10rpx;
                    }
                    .text{
                        padding: 20rpx 0;
                    }
                }
            }

3.在common-style中加入swiper和及其item的渲染模式，不然广告位布局会乱例如加入padding会主体受到影响

view,text,swiper,swiper-item,input,textarea{
box-sizing: border-box;
   }