1. Johngo学长首页
  2. 技术点详细复盘专题
  3. Python

在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

• Python • 阅读 58

上一章讲了后端部分的代码逻辑，传送门：在微信小程序上做一个「博客园年度总结」：后端部分

本章继续写一下小程序端的逻辑

因为前端涉及到一些交互效果，加上我对前端也不太熟悉，所以这部分会重点写一下我自己觉得比较好玩的地方

1、上下滑动切换页面效果

在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

这其实是一个轮播图效果，通过上下滑动来切换页面

小程序中的 swiper 滑块视图容器，可以实现这个效果

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

在 swiper中放置 swiper-item组件，一个 swiper-item代表一张”轮播图”

<swiper vertical="true" class="cn_container" easing-function="linear" bindchange="swiperChange" bindanimationfinish="swiperFinish">
  <swiper-item>
    ... ...

  </swiper-item>

  <swiper-item>
    ... ...

  </swiper-item>
</swiper>

vertical="true"表示滑动方向为纵向（小程序默认为横向滑动）

bindchange事件监听页面滑动，滑动时会触发，它绑定了函数swiperChange函数，后面会详细说下这个函数的作用

2、控制底部icon的变化

在滑动到最后一页前，底部的icon为”向上的箭头”，

滑动到最后一页时，底部变为【生成我的年度封面】按钮

在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

要实现这个功能，我们需要知道当前是否滑动到了最后一个 swiper-item

在 swiper标签中有一个 bindchange属性，它能监听到当前处于哪个轮播图

在js文件中新建一个函数 swiperChange()

swiperChange (e) {
  // console.log(e)
  if (e) {
    let current = e.detail.current;
    let source = e.detail.source
    if (source === 'touch') {
      this.setData({
        index:current
      })
    }
  }
  // console.log(this.data.index)
}

它的作用是获取当前所处的 swiper-item，也就是 e.detail.current

在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

每次滑动切换轮播图时，会触发这个事件，然后index值会随之更新，这样在前端用 if条件控制一下 ，就可以显示不同的内容了

比如一共有6张轮播图，如果 index<5< code>&#xFF0C;&#x5C31;&#x663E;&#x793A;&#x7BAD;&#x5934;icon&#xFF1B;&#x5982;&#x679C;<code>index>5</code>&#xFF0C;&#x5C31;&#x663E;&#x793A;&#x6309;&#x94AE;<!--5<-->

<view class="bottom_up" wx:if="{{index < 5}}">
<!-- 判断当前是切到哪个轮播图，不是最后一个时，显示上滑箭头 -->
  <image src="/images/up2.svg" mode="scaleToFill" class="jiantou"></image>
</view>

<navigator class="bottom_up" wx:if="{{index == 5}}" url="/pages/cnblogs_year_cover/cnblogs_year_cover" open-type="navigate">
<!-- 判断当前是切到哪个轮播图，当切到最后一个时，不显示上滑箭头 -->
  <view class="fengmian">&#x751F;&#x6210;&#x6211;&#x7684;&#x5E74;&#x5EA6;&#x5C01;&#x9762;</view>
</navigator>

3、点击按钮跳转至「年度封面」

在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

这个比较简单，在page中新建一个页面，然后使用 <navigator></navigator>导航过去即可

<navigator class="bottom_up" wx:if="{{index == 5}}" url="/pages/cnblogs_year_cover/cnblogs_year_cover" open-type="navigate">
  <view class="fengmian">&#x751F;&#x6210;&#x6211;&#x7684;&#x5E74;&#x5EA6;&#x5C01;&#x9762;</view>
</navigator>

url属性填写目标页page

4、回看年度总结

点击【回看年度总结】会跳转到年度总结首页，其实它的实现方法和上面跳转到【年度封面】的方法一样，只要导航到【年度总结】page页面就好了

跳转至【年度封面】用的是「非编程式导航」，这里我们用「编程式导航实现」

打开【年度封面】的wxml文件 cnblogs_year_cover.wxml

  <view>
    <button type="default" class="clear_style" bindtap="gotoreport">
      <text class="button_text">&#x56DE;&#x770B;&#x5E74;&#x5EA6;&#x603B;&#x7ED3;</text>
    </button>
  </view>

bindtap属性绑定 gotoreport&#x51FD;&#x6570;，导航跳转功能在这个函数中实现

打开js文件 cnblogs_year_cover.js

  //&#x901A;&#x8FC7;&#x7F16;&#x7A0B;&#x5F0F;&#x5BFC;&#x822A;&#x8DF3;&#x8F6C;&#x5230;&#x62A5;&#x544A;&#x9875;&#x9762;
  gotoreport(e) {

    wx.navigateTo({
      url: '/pages/cnblogs_year_report/cnblogs_year_report'
    })
  },

5、分享年度封面

这里实现的效果是点击按钮，能够生成截图进行分享

<button></button>按钮有一个 open-type&#xA0; &#x5C5E;&#x6027;，当 open-type="share"时，可以点击按钮进行小程序分享

  <view>
    <button type="default" open-type="share" class="clear_style">
      <text class="button_text">&#x5206;&#x4EAB;&#x5C01;&#x9762;</text>
    </button>
  </view>

同时需要在js文件中编辑 onShareAppMessage()函数

/**
   * &#x7528;&#x6237;&#x70B9;&#x51FB;&#x53F3;&#x4E0A;&#x89D2;&#x5206;&#x4EAB;
   */
  onShareAppMessage() {
    return {
      title: '&#x6211;&#x7684;&#x535A;&#x5BA2;&#x56ED;&#x5E74;&#x5EA6;&#x603B;&#x7ED3;',
      path: '/pages/cnblogs_year_report/cnblogs_year_report', // &#x5F53;&#x5BF9;&#x65B9;&#x70B9;&#x51FB;&#x4F60;&#x5206;&#x4EAB;&#x7684;&#x5C0F;&#x7A0B;&#x5E8F;&#x65F6;&#x5230;&#x8FBE;&#x7684;&#x9875;&#x9762;
      // imageUrl: 'xxx'  //&#x8F6C;&#x53D1;&#x65F6;&#x663E;&#x793A;&#x6B64;&#x56FE;&#x7247;&#xFF0C;&#x82E5;&#x6CA1;&#x6709;&#x6B64;&#x53C2;&#x6570;&#xFF0C;&#x9ED8;&#x8BA4;&#x662F;&#x4F20;&#x9001;&#x5F53;&#x524D;&#x9875;&#x9762;&#x622A;&#x56FE;
    }
  }

结语

因为前端涉及到很多样式代码，开发时为了调整元素居中，换行、间距等等花了很多时间，

并且这份代码比较冗余，有些css代码我也不知道有没有生效😂

所以完整代码会在后面统一放出来，不单独拿出来讲了

Original: https://www.cnblogs.com/hanmk/p/16827268.html
Author: 我是冰霜
Title: 在微信小程序上做一个「博客园年度总结」：小程序部分交互效果实现

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/800015/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球