【微信小程序开发】（三）首页banner组件使用swiper

uniapp swiper文档使用地址 https://uniapp.dcloud.io/component/swiper.html

这部分直接按照文档使用方式使用就好了，贴出首页代码（没有依赖可直接使用）

<template><view class="content"><view><view class="uni-margin-wrap"><swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"><swiper-item><view class="swiper-item uni-bg-red"><img src="https://boss-1251943848.cos.ap-beijing.myqcloud.com/20220318/5113e64691274f2a9dc2c93ec39447f2.jpg?imageMogr2/thumbnail/750x" alt=""></view></swiper-item><swiper-item><view class="swiper-item uni-bg-red"><img src="https://boss-1251943848.cos.ap-beijing.myqcloud.com/20220331/d3c4f0a138564ad6ab7d04df14062de7.jpg?imageMogr2/thumbnail/750x" alt=""></view></swiper-item></swiper></view></view></view>
</template><script>export default {data() {return {indicatorDots: true,autoplay: true,interval: 2000,duration: 1500}},onLoad() {},methods: {}}
</script><style>.uni-margin-wrap {width:690rpx;width: 100%;}.swiper {height: 114px;margin: 15px;border-radius: 4px;overflow: hidden;}.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}.swiper-list {margin-top: 40rpx;margin-bottom: 0;}.uni-common-mt{margin-top:60rpx;position:relative;}.info {position: absolute;right:20rpx;}.uni-padding-wrap {width:550rpx;padding:0 100rpx;}.swiper-item img {width: 100%;height: 100%;display: block;}/* #ifdef APP-PLUS */uni-swiper .uni-swiper-dot {width: 10rpx;height: 3rpx;}uni-swiper .uni-swiper-dot-active {background-color: #000;width: 40rpx;border-radius: 5rpx;}/* #endif *//* #ifdef MP-WEIXIN */wx-swiper .wx-swiper-dot {width: 20px;height: 3px;border-radius: 2px;background: hsla(0,0%,100%,.4);;}wx-swiper .wx-swiper-dot-active {background: #FFF;}
</style>

其中遇到的问题是，指示点的自定义文档中并没有API支持实现需要以下俩行CSS 并确保CSS是全局生效而不是scoped

/* #ifdef MP-WEIXIN */wx-swiper .wx-swiper-dot {width: 20px;height: 3px;border-radius: 2px;background: hsla(0,0%,100%,.4);;}wx-swiper .wx-swiper-dot-active {background: #FFF;}

然后就得到了以下页面

【微信小程序开发】（三）首页banner组件使用swiper相关推荐

微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序开发的首页设置
在我们微信小程序开发的时候,页面切换十分麻烦,这个时候你可以设置打开软件时默认显示的页面,设置十分简单第一种方法:在app.json中的pages选项中: 这样就设置首页是Index, 第二种方法就 ...
微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序（三）常见组件
常见组件 view 相当于web里的div标签 text 1.文本标签 2.只能嵌套text 3.长按文字可以复制(只有该标签有这个功能) 4.可以对空格(&nbsp)回车 ...
入门微信小程序开发(三)数据绑定的几种用法
一.数据绑定与书写HTML页面一样,小程序页面也只能通过多写多练提升.在构建完页面后就出现了一个问题,我们该如何获取组件元素让数据与之关联呢? 在网页开发中,我们同样使用JS操作DOM,包括数据渲染 ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序开发中调用button组件添加微信客服功能
个人比较喜欢这个解决方案,原因一是由腾讯官方运营,比较稳定.二是确实很方便啊,直接用微信回复就好了.核心代码就一行,如下 <button open-type="contact" ...
微信小程序开发的的基本组件
一.视图容器组件 1.常见的视图容器组件 (1).view 普通视图区域类似于 HTML 中的 div ,是一个块级元素常用来实现页面的布局效果 (2).scroll-view 可滚动的视图区域 ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
首先展示一下要显示的功能:` 首先需要在开发者工具中新建一个文件夹(components),分别在文件夹中新建.js .json .wxml .wxcss四个文件(可以右键文件夹,选择新建新建(com ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...

【微信小程序开发】（三）首页banner组件使用swiper

【微信小程序开发】（三）首页banner组件使用swiper相关推荐

最新文章

热门文章