九宫格grid和轮播图混合应用
思路:轮播图嵌套在九宫格外面,详情参考官方文档。https://uviewui.com/components/grid.html
领导要求将轮播图的指示器改为:数字胶囊类型,在uview组件的u-swiper组件中有这一属性 :mode=“number” 。但是如果里面还要嵌套九宫格grid就不能应用u-swiper组件。此时就需要用uni-app中的swiper
进行到这步,我们需要把swiper中的指示器 :indicator-dots 改为false。令他不显示指示器默认样式
还有一点获取当前轮播展示的下标,并传值给指示器,完成数字胶囊样式指示器的轮播
- 官网
2. 根据官网的做出来之后,指示器样式是dots类型,这是根据官网做出来的样式↓
3. 不符合要求,我百度了好多才解决好这个指示器样式,首先在swiper下边定义一个指示器,样式和位置在style中更改。
/* 指示器样式 */
.u-indicator-item-number {
width: 40px;
padding: 6rpx 16rpx;
line-height: 1;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100rpx;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
position: relative;
left: 45%;
}
- 子组件中template部分代码
<view class="swiper" >
<!--外部轮播 -->
<swiper @change="topSwiperTab" :current="uCurrent" :indicator-dots="false" >
<swiper-item v-for="(item,index) in newBankList " :key="index" >
<u-grid :col="4" >
<u-grid-item v-for="(item2,index2) in item" :key="index2" >
<u-image width="30px" height="30px" :src="item2.src"></u-image>
<view class="grid-text">{{item2.text}}</view>
</u-grid-item>
</u-grid>
</swiper-item>
</swiper>
<!-- 更改指示器样式
指示器:数字胶囊 -->
<block class="number" >
<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ newBankList.length }}</view>
</block>
</view>
- 子组件中script部分代码
props:{
newBankList:Array,
mode:String
},
data(){
return{
uCurrent:0
}
},
methods:{
topSwiperTab(e){
this.uCurrent =Number(e.target.current)
// number(e.target.current)
console.log(this.uCurrent);
}
}
6.查看完成后的样式