<swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}">
<block wx:for="{{ swiperItem }}">
<swiper-item>
<navigator url="{{ item.linkUrl }}">
<image class="slide-image" src="{{ item.imgUrl }}"></image>
</navigator>
</swiper-item>
</block>
</swiper>
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
width:40rpx;
display: inline-flex;
height: 10rpx;
margin-left: 20rpx;
justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow:;
background: rgba(255,255,255,0.8);
border-radius: 8rpx
}
.swiper-box .wx-swiper-dot-active::before{
background:rgba(244,0,0,0.8);
}

移动swiper的点到左下角 55555

.wx-swiper-dots.wx-swiper-dots-horizontal{
position: absolute;
left:;
transform: translateX(10rpx);
}

wx小程序修改swiper 点的样式的更多相关文章

  1. 小程序修改默认的radio样式

    1.wxml: <radio-group class="radio-group" bindchange="radioChange"> <vie ...

  2. mpvue——小程序修改input的placehold样式

    前言 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 用placeholder-class的时候没 ...

  3. 微信小程序修改单选按钮的默认样式

    https://blog.csdn.net/abs1004/article/details/78922596

  4. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  5. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

  6. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  7. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  8. wx小程序获取用户位置信息

    wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...

  9. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

随机推荐

  1. mac终端下连接阿里云服务器

    通过ssh连接 ssh 用户名@地址 ssh root@xx.xxx.xxx.xx https://www.jianshu.com/p/f034817a7837 最后还是通过  FileZilla 连 ...

  2. 回收站(recyclebin)及回滚

    1. alter table table_name enable row movement; flashback table table_name  to timestamp  to_timestam ...

  3. 559. Maximum Depth of N-ary Tree C++N叉树的最大深度

    网址:https://leetcode.com/problems/maximum-depth-of-n-ary-tree/ 很简单的深度优先搜索 设定好递归返回的条件和值 /* // Definiti ...

  4. MSSQL内存架构及管理

    1.  MSSQL内存架构 相比较Oracle,MSSQL的内存区域并没那么清晰,但和Oracle类似,MSSQL内存区域大体也可以分为三个部分:buffer pool,query/workspace ...

  5. js如何比较两个日期之间相差数(天、时、分、秒)

    首先,我们模拟一个例子 引入js文件 <script type="text/javascript" src="jquery.min.js">< ...

  6. js--事件冒泡-捕获

    什么是事件流: 事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念, IE的事件流是事件冒泡流(event bubbl ...

  7. git开发过程的配置和使用

    git开发过程的使用 1.创建仓库 2.新建项目,填写项目名称等信息 3.初始化仓库,创建git仓库 git init 4.配置个人信息(配置过可忽略) git config --global use ...

  8. Win10系列:UWP界面布局基础9

    在XAML中,样式.模板.画笔和动画等都被看做是资源,它们最终的作用都是相同的,就是让设计人员可以使用这些资源创建更好的视觉效果,对其设计的产品外观进行标准化统一,那么如何使用这些资源并组织和重用呢, ...

  9. 微信公众号 access_token 没有过期 却失效

    最近在开发微信项目的时候 access_token   缓存到 redis里面的,明明在两个小时的有效期内  微信却提示 "errcode":40001,"errmsg& ...

  10. learning at command AT+CEREG

    AT command AT+CEREG [Purpose]        Learning how to query the network registration status   [Eeviro ...