• 微信小程序制作随笔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数据代码,

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

  • 相关阅读:
    background和background-size
    获取表单的初始值,模拟placeholder属性
    input[type=checkbox]
    background-size
    input的type属性的修改
    选项卡切换
    2016.12.13
    3. 如何封装查询条件与查询结果到map中
    Java 实现网站当前在线用户统计
    sell-- wordPOI
  • 原文地址:https://www.cnblogs.com/hjjjjhd/p/10334976.html
Copyright © 2020-2023  润新知