阅读 109

微信小程序开发--欢迎页的实现(微信小程序开发费用 制作费用)

1、背景

公司移动端目前有Android 跟 小程序两块,老板要求小程序跟Android的实现要基本一致。

Android端的一般在应用启动的时候会有个欢迎页。

如下图所示,实现的效果。

GIF 2021-11-9 17-04-39.gif

当然了,对于这些欢迎页的图片最好还是放到服务器上面,毕竟小程序这边对包的大小是有限制的。

2、实现

下面我们看下这种效果要怎样实现。

通过上面的效果图,可以看到这里主要做了一件事情:

通过左右滑动视图,显示不同的图片。

那么在小程序中有这种可以左右切换视图的组件吗?

答案是:

swiper-item 组件

滑块视图容器,并且它的内部只可放置swiper-item组件。

好了既然了这个组件可以达到效果那就整起来呗。

2.1布局代码

<swiper >
        <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item" >
          <swiper-item class="swiper-items"  >
            <image class="swiper-image" src="{{item}}"></image>
            <button class="button-img" bindtap="jumpLogin" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
          </swiper-item>
        </block>
</swiper>复制代码

可以看到,整个布局的外层使用swiper组件进行包裹,然后在进行一个循环wx:for="{{imgs}}",循环中在包裹swiper-item组件。

也就是说有imgs中有几个图片数据,swiper-item就有几个。

另外需要注意的一点是: 在最后一张图片上添加了一个 按钮,如下图所示:

image.png

当点击这张图片的时候,就会进行跳转。

2.2样式代码

swiper {
  position: absolute;
  height: 100%;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
  opacity:0.9;
}

.button-img{   
   position: relative;
   bottom: 85px;
   height: 40px;
   width: 120px;
   opacity:0;
}复制代码

样式代码比较简单,就不过多介绍了。

2.3逻辑代码

data: {
    imgs:[
    'http://******WCFKd6AcgkDAAMQcOXZojM321.png',
    'http://******6AUz98AALDH9L_Pq4017.png',
    'http://******MQEjElqeQ315.png'
  ]
  },复制代码

逻辑代码中主要就是定义了一个imgs数组,用于在布局代码中做循环使用的。

好了,内容就这么多,想要实现小程序的欢迎页就这样了。


作者:YMAndroid
链接:https://juejin.cn/post/7028730878431854606


文章分类
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐