最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了。本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解决。

框架 编辑器
uni-app Hbuilder X

先上原代码和默认样式

<template>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">
<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="height: 350rpx;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" style="height: 350rpx;"></image>
</view>
</swiper-item>
</swiper>
</template>

再看看我们要实现的目标样式

开搞~

1. 小程序前端样式控制还是css,那么我们找到css就可以修改。先在浏览器打开,方便调试。

2. 鼠标放到轮播图点上,鼠标变成小手后--->点击鼠标右键--->检查



好了,我们定位到了控制样式的css

<div class="uni-swiper-dots uni-swiper-dots-horizontal">
<div class="uni-swiper-dot uni-swiper-dot-active">
</div>
<div class="uni-swiper-dot">
</div>
</div>

经过我3级英语的反复分析

uni-swiper-dot 是轮播图的默认点样式

uni-swiper-dot-active 在标签class里不停的切换,说明这个是轮播到当前index的样式

3. 这下可以开始搞了,不过先别急着代码里更改,我们先在调试窗口试着更改下css样式,看是否定位正确。

哦了,当我把宽高都变为20px后,明显轮播图的点变大了。这样就确定之前的分析是正确的。

4. 开始在代码里改成我们想要的样式。(如果对css不熟悉的小伙伴,可以继续在浏览器里不停尝试到自己想要的效果再在代码里做更改)

先分析目标样式,发现它的点偏左,且轮播到当前index后样式为一个白色的长条。

5.话不多说,直接在页面style里加入css。

  // 控制轮播图点整体布局在左边
uni-swiper .uni-swiper-dots{
left: 60px;
}
// 默认样式
uni-swiper .uni-swiper-dot{
height: 5px;
width: 5px;
background: rgba(0,0,0,.1);
}
// 轮播到当前index的样式
uni-swiper .uni-swiper-dot-active{
width: 20px;
height: 3px;
border-radius: 10px;
background-color: #FFF ;
}

o yeah!完工了,我真是个天才。

嗳,不对,浏览器打开怎么还是以前的样式?

是不是编译器没编译最新的?好,再编译一次,不行

是不是浏览器缓存导致的?好,删除缓存,还是不行。。

哦,知道了,一定是没写 !important,它的样式没有覆盖掉,加上,还是不行。。。毁灭吧,累了!

long long time after,再次翻看这段代码,我一直在想为什么在浏览器中更改可以,而在代码里更改却没生效呢?好吧,我承认我百度了,可是翻了很多没有找到我碰到的问题,只能继续翻翻翻,最终碰到一个类似的问题,文章说的是有些组件在编译过后是原生组件,生成后不能更改,需要把css样式放到app.vue中,好吧,抱着试一试的心态把css放到app.vue的style下,没想到问题解决了。。

6. 贴改完的H5效果图

哦 yeah,这次终于完工了吧。

是的,你没猜错。当我把代码运行在微信小程序的时候,那熟悉的2个黑点我真的不忍直视。why?

打起精神接着来吧

1. 在微信小程序中调试竟然原封不动的展示了我的代码



根本没有发现什么dot样式之类的,那我还怎么调?

(这里我没有找到其他办法,有懂的小伙伴可以留言分享下微信开发工具如何调试,提前感谢。)

不过我还是找到了一个办法可以调试,就是在他的官网,这个办法以后可以用到其他的css修改上,不只是swiper。

2. 浏览器打开官网微信小程序开发文档官网

3. 我们按照之前的方法定位元素,找到css

发现他的class 名字在h5是uni-开头,在微信小程序中是wx-开头,

和之前的不一样,这样导致不生效,好,那我们把代码改成wx-开头。

最终效果



有些小伙伴应该看到之前的标题栏不存在了,这个很简单,在uni-app里pages.json文件修改"navigationStyle": "custom"。小程序的修改方式大家自行百度。

"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "轮播图demo",
"navigationStyle": "custom"
}
}

最终css代码

// ifdef H5 代表在h5环境下生效,以此类推。
//如果只需在微信下修改,只需把ifdef mp-weixin下内容复制到app.vue的style中
/* #ifdef H5 */
// 控制轮播图点整体布局在左边
uni-swiper .uni-swiper-dots{
left: 60px;
}
// 默认样式
uni-swiper .uni-swiper-dot{
height: 5px;
width: 5px;
background: rgba(0,0,0,.1);
}
// 轮播到当前index的样式
uni-swiper .uni-swiper-dot-active{
width: 20px;
height: 3px;
border-radius: 10px;
background-color: #FFF ;
}
/* #endif */
/* #ifdef MP-WEIXIN */
// 控制轮播图点整体布局在左边
wx-swiper .wx-swiper-dots{
left: 60px;
}
// 默认样式
wx-swiper .wx-swiper-dot{
background: rgba(0,0,0,.1);
height: 5px;
width: 5px;
}
// 轮播到当前index的样式
wx-swiper .wx-swiper-dot-active{
width: 20px;
height: 3px;
border-radius: 10px;
background-color: #FFF ;
}
/* #endif */

本人后端一枚,不过前端现在样式一般都能做到。(给我个设计图或者素材可以直接写出来)

其实基础css很容易学,在这里给后端程序员一个推荐,去看flex布局,最多也就2个小时时间,最最重要的是一定要练习,我做小程序前后端开发都是自己做,或许我接触的少,但是在我做的项目中flex布局可以搞定99%的事,剩下的position: absolute;就可以解决。只要把这两块掌握了,用uni-app也好,用小程序员原生也好,都是很简单的。

写文不易,回头看看就这么些东西,写下来用了快2个小时。。。。

喜欢的小伙伴点赞支持下我这个新人,以后可以多多分享一些开发中碰到的问题给大家。

一分钟学会如何自定义小程序轮播图(蜜雪冰城Demo)的更多相关文章

  1. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  2. 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码: 这是WXML 页面 代码: <view class='carousel_div'> <swiper class=" ...

  3. 微信小程序------轮播图

    swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...

  4. 微信小程序轮播图的制作与跳转

    <!--轮播图 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' au ...

  5. 微信小程序--轮播图,标题,盒子,tab栏的合成例子

    小程序是什么? 微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用. 一.小程序的样式编写: 目录结构: app.json { " ...

  6. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  7. 微信小程序轮播图

    swiper标签 <!--index.wxml--> <swiper class="swiper" indicator-dots="true" ...

  8. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  9. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

随机推荐

  1. 【uniapp 开发】文字缩略css

    文字超出两行后显示省略号 display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; ...

  2. RedisDesktopManager 连接不上远程 Redis

    1.首先确保远程redis-server已经启用: 2.连接不到可能的原因: redis3.2以上版本默认开启保护模式,不允许外网访问,需要修改redis.conf文件 3.redis.conf文件需 ...

  3. [MySQL]IP处理函数inet_aton()和inet_ntoa()

    INET_ATON(expr) 给出一个作为字符串的网络地址的"点地址"(如127.0.0.1)表示,返回一个代表该地址数值的整数.地址可以是4或8比特地址. mysql> ...

  4. 剖析虚幻渲染体系(14)- 延展篇:现代渲染引擎演变史Part 1(萌芽期)

    目录 14.1 本篇概述 14.1.1 游戏引擎简介 14.1.2 游戏引擎模块 14.1.3 游戏引擎列表 14.1.3.1 Unreal Engine 14.1.3.2 Unity 14.1.3. ...

  5. 正则表达式小技巧,sql中in的字符串处理

    工作中我经常写sql,当写带in的语句时,需要敲好多单引号,逗号,敲写起来容易易出错.因此,我写了一个小工具,处理这种繁琐工作.原理简单,利用正则表达式匹配.替换. 先看界面,一个html页面,包含三 ...

  6. MySQL创建高性能索引

    参考<高性能MySQL>第3版 1 索引基础 1.1 索引作用 在MySQL中,查找数据时先在索引中找到对应的值,然后根据匹配的索引记录找到对应的数据行,假如要运行下面查询语句: 如果在u ...

  7. Kotlin 之 let、with、run、apply、also 函数的使用

    一.内联拓展函数 let let 扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择:let函数另一个作用就是可以避免写一些判断null的操 ...

  8. 【洛谷】P4555 [国家集训队]最长双回文串

    P4555 [国家集训队]最长双回文串 题源:https://www.luogu.com.cn/problem/P4555 原理:Manacher 还真比KMP好理解 解决最长回文串问题 转化为长度为 ...

  9. flutter常用命令--不定期更新

    // 更新flutter flutter upgrade // Dart 构造函数默认值 ImageGridView({Key key, this.imgs, this.isEdit: false}) ...

  10. redis的zset数据结构:跳表

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. 广州这边封闭式管理好久了,今天终于周末可以出去溜溜了 什么是zset z ...