微信小程序 - 功能、效果进阶篇

项目内功能陆续补全 ~

轮播图基础版 (虽可使用，但不完美) 跑马灯跑马灯公告的场景与问题缺陷版 （只适应Android版） 空格占位符

微信小程序 - 工具的封装与使用

微信小程序 - 倒计时60秒(获取验证码)

空格占位符

轮播图

基础版 (虽可使用，但不完美)

实现效果 扩展API 实现代码

.wxml <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <navigator url="{{item.link}}" hover-class="navigator-hover"> <image src="{{item.url}}" class="slide-image"/> </navigator> </swiper-item> </block> </swiper> .wxss //设置图片的宽度 .slide-image{ width: 100%; } .js /** * 页面的初始数据 */ data: { //pages/mine/Thrned:跳转的页面 url:图片地址 imgUrls: [{ link: '/pages/mine/Thrned', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622158&di=5df449974b38a4cd4bca5d301a01abe9&imgtype=0&src=http://img02.tooopen.com/images/20150430/tooopen_sy_121079772852.jpg' }, { link: '/pages/logs/logs', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622162&di=bb1b57d5af5bbee6659f728d13fe4fff&imgtype=0&src=http://pic183.nipic.com/file/20181004/24839019_081923506085_2.jpg' }, { link: '/pages/mine/jump', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554107622168&di=7bf95958982f51a28701ce5017f8a4ca&imgtype=0&src=http://imgsrc.baidu.com/imgad/pic/item/c8ea15ce36d3d539cb1de8f93187e950352ab0ec.jpg' }], // 是否需要底部轮播小点 indicatorDots: true, // 是否自动播放 autoplay: true, // 自动播放时间间隔 interval: 2000, // 滑动动画时间 duration: 1000, },

跑马灯

完整版（改日归纳补全）

跑马灯公告的场景与问题

显示

单条公告多条公告

机型兼容

工具模拟器Android手机IOS手机

缺陷版 （只适应Android版）

实现效果（因为是闲余写的demo，所以整体看起来有点丑- -）

.js

page({ data: { //这里我设置的是公告条目的数量，如果是单条则不需要使用 runtextSize: 6, //这里的滚动数据是自我模拟的，真实开发中是接口获取的，然后自己循环后加空格占位进行拼接 runText: "你听我说~ 　　　　　 　　　　　朝阳起又落！　　　　　 　　　　　晴雨难测~ 　　　　　 　　　　　道路是脚步多！ 　　　　　 　　　　　我已习惯~ 　　　　　 　　　　你突然间的自我!", } /** * 生命周期函数--监听页面显示 */ onShow: function() { //根据自身场景选区对应的代码，如果单条的问题不大，如果是多条就要考虑机型问题 //单条公告直接设置widthSear数据 this.setData({ widthSear: -15 }) //多条公告需要测量宽度然后设置widthSear数据 // 屏幕宽度 var windowWidth = wx.getSystemInfoSync().windowWidth; var width = windowWidth / 25 var distance = -width * this.data.runtextSize this.setData({ widthSear: distance }) }, }) .wxml <view class="marquee_container" style="--marqueeWidth--:{{widthSear}}em"> <view class="marquee_text">{{runText}}</view> </view> .wxss @keyframes around { from { margin-left: 100%; } to { /* var接受传入的变量 */ margin-left: var(--marqueeWidth--); } } .marquee_container { background-color: #fe4655; height: 50rpx; line-height: 44rpx; position: relative; width: 100%; margin-top: 0rpx; } .marquee_container:hover { /* 不起作用 */ animation-play-state: paused; } .marquee_text { color: #fff; font-size: 28rpx; display: inline-block; white-space: nowrap; animation-name: around; animation-duration: 15s; /*过渡时间*/ animation-iteration-count: infinite; animation-timing-function: linear; }

空格占位符

常见的空格占位符       > < & \t \n //下方是全角的空格，可尝试复制，此乃关键 　　　　　 Effect： 空格占位 .wxml (小程序只识别了全角的空格占位符，可直接复制下面最后一条的空格，也可以自己使用输入法输入全角) <view decode="true">梦   想</view> <view decode="true">梦 想   纪</view> <view decode="true">梦 想   纪</view> <view decode="true">梦>想>>>纪</view> <view decode="true">梦<想<<<纪</view> <view decode="true">梦&想&&&纪</view> <view decode="true">梦\t\t\t\t\t\t\t\t\t\t\t\想</view> <view decode="true">梦\n\n\n\n\n\想</view> <view decode="true">梦 　　　　　想</view>

借鉴文章

小程序 - 单行跑马灯效果