首页 > 常见问题 > 使用小程序制作banner图

使用小程序制作banner图

王林
发布: 2021-01-28 09:55:43
转载
2723 人浏览过

使用小程序制作banner图

导语:

对于前端工程师来说,banner图是前端开发中必不可少的一部分。但是对于缺少了DOM的小程序来说该如何实现banner图呢?就像其他的框架封装不同的banner图的方法,小程序也封装了banner的方法,下面我们看看具体实现方法。

(学习视频分享:编程入门

一:准备工作

我用两张图吧,如下所示:

1.jpg              

8db74c7174dc5f2b68b0001e8748e72.png

2.jpg

f1d7cf05481668e54f0692c50cb8bee.png

二:编写xsml代码(即html)

在这里我们要是用标签来进行包裹,他有如下属性:

f5148725a7a7fb7f692563fb0e78fa8.png

这些属性足够我们使用,我们为了是xsml页面简洁,所以我在这里使用了for循环,将使用到的资源放进js中进行循环。而且为了使数据可进行双向绑定,所以他的属性值我打算放到js中进行配置。我的xsml代码如下:

1

2

3

4

5

6

7

8

<swiper indicator-dots="{{indicatorDots}}"

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">

      <block wx:for="{{arr}}">

        <swiper-item>

            <image src="{{item}}" class="slide-image" width="355" height="150"/>

        </swiper-item>

      </block>

</swiper>

登录后复制

三:js的配置

由于是双向绑定,所以我们只要在js中进行配置需要的参数即可。由于我的两张图片使用的是1.jpg和2.jpg,所以我只需要在js中进行一个小小的循环即可,这个分情况而定,你么也可以把图片的地址直接放到数组里面;最后改好了之后记得setData一下,,不然没效果,js代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

Page({

  

  /**

   * 页面的初始数据

   */

  data: {

    mode:"scaleToFill",

    arr:[],

    indicatorDots: true,

    autoplay: true,

    interval: 2000,

    duration: 1000,

  },

  

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var array = this.data.arr

    for (let i = 1; i < 3; i++) {

      array.push("img/" + i + ".jpg")

    }

    this.setData({ arr: array})

  

  },

  

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

        

       

  },

  

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  

  },

  

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  

  },

  

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  

  },

  

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  

  },

  

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  

  },

  

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  

  },

  

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  

  },

  

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  

  },

  

  

})

登录后复制

好了,,我们来看一下最终效果:

44381d26611753d475cb83cfe942852.png

相关推荐:小程序开发教程

以上是使用小程序制作banner图的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:cnblogs.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板