小程序模板网

微信小程序学习点滴《二》:开发者工具快捷键,轮播图 swiper图片组件 ...

发布时间:2018-03-20 12:06 所属栏目:小程序开发教程

一:开发者工具快捷键微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.现在貌似不能修改.如果有同学找到修 ...

 
 
 

一:开发者工具快捷键

微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.

我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.

现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我

微信小程序代码编辑快捷键

 

常用快捷键

格式调整

  • Ctrl+S:保存文件
  • Ctrl+[, Ctrl+]:代码行缩进
  • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  • Shift+Alt+F:代码格式化
  • Alt+Up,Alt+Down:上下移动一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  • Ctrl+Shift+Enter:在当前行上方插入一行

光标相关

  • Ctrl+End:移动到文件结尾
  • Ctrl+Home:移动到文件开头
  • Ctrl+i:选中当前行
  • Shift+End:选择从光标到行尾
  • Shift+Home:选择从行首到光标处
  • Ctrl+Shift+L:选中所有匹配
  • Ctrl+D:选中匹配
  • Ctrl+U:光标回退

界面相关

  • Ctrl + \:隐藏侧边栏
二:轮播图 swiper图片组件

照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

 

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

<!--index.wxml-->    

    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">    

      <block wx:for="{{movies}}" wx:for-index="index">    

        <swiper-item>    

          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>    

        </swiper-item>    

      </block>    

    </swiper>

 

这里有几个属性需要说明.

微信小程序开发的循环用到了<block wx:for >

 

我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

//index.js    

//获取应用实例    

var app = getApp()    

Page({    

  data: {    

    movies:[    

    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,    

    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,    

    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,    

    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}     

    ]    

  },    

  onLoad: function () {    

  }    

})   

 

3.WXML

 

/**index.wxss**/

.swiper {

  height: 400rpx;

  width: 100%;

}

.swiper image {

  height: 100%;

  width: 100%;

}

WXSS不多说,跟CSS没啥区别.



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22760.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询