微信小程序制作-随笔1

微信小程序的制作处于慢慢摸索状态,慢慢遇到问题边解决边记录吧。
1.总体结构:
  pages文件夹下存页面文件,images文件夹存图片,app.js、app.json、app.wxss、config.js、为全局的配置项。
  pages文件夹下每个文件夹表示一个页面,创建文件自动生成js、json、wxml、wxss文件,由微信后台进行编译。
  app.json有全局配置相关内容,配置项有:pages(设置页面路径)、window(设置默认页面的窗口表现)、tabBar(设置底部tab表现)、networkTimeout(设置网络超时时间)、debug(设置是否开启debug)。
2.页面轮播:
  微信自带有轮播插件,swiper标签开始轮播,在标签内可填配置项,swiper-item作为每一个轮播项。js的data中配置图片路径和所需功能
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}' circular='true' class='lunbo'>
      <block class="lunbo_item" wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item>
        <navigator class="img_btn">
          <image src="{{item.url}}" />
        </navigator>
      </swiper-item>
      </block>
    </swiper>
<!-- wxml页面代码 -->
    imgUrls:[
      {url:'/images/ad1.jpg'},
      { url: '/images/ad2.jpg' },
      { url: '/images/ad3.jpg' }
    ],//数组为需要循环的图片路径
    indicatorDots:true,//是否显示指示点
    autoplay:true,//是否自动播放
    interval:3000,//图片与下一张图片切换的时间
    duration:1000,//图片切换到下一张图片的时间
//js文件内data数据代码,

正确编写上诉代码就可以简单实现微信自带的轮播功能。

猜你喜欢

转载自www.cnblogs.com/hjjjjhd/p/10334976.html