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

项目内功能陆续补全 ~

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

• 微信小程序 - 倒计时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%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20150430%2Ftooopen_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%3A%2F%2Fpic183.nipic.com%2Ffile%2F20181004%2F24839019_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%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fc8ea15ce36d3d539cb1de8f93187e950352ab0ec.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">梦&nbsp;&nbsp;&nbsp;想</view>
  <view decode="true">梦&ensp;想&ensp;&ensp;&ensp;纪</view>
  <view decode="true">梦&emsp;想&emsp;&emsp;&emsp;纪</view>
  <view decode="true">梦&gt;想&gt;&gt;&gt;纪</view>
  <view decode="true">梦&lt;想&lt;&lt;&lt;纪</view>
  <view decode="true">梦&amp;想&amp;&amp;&amp;纪</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>

借鉴文章

• 小程序 - 单行跑马灯效果