服務項目
品牌網站建設

數字營銷

係統平台開發

數字產品

安全運維

Menu
官网开云
官网开云
微信小程序學習點滴《二》:開發者工具快捷鍵,輪播圖 swiper圖片組件 ...
時間:2016-10-17 13:04:00

一:開發者工具快捷鍵

微信小程序已經跑起來了.快捷鍵設置找了好久沒找到,完全憑感覺.圖貼出來.大家看看.

我現在用的是0.10.101100的版本,後續版本更新快捷鍵也應該不會(hui) 有什麽(me) 變化.

現在貌似不能修改.如果有同學找到修改的方法,麻煩告訴我

微信小程序代碼編輯快捷鍵

常用快捷鍵

格式調整

  • 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圖片組件

照著開發文檔嚐試,總是能有所收獲.之前做androids開發,做個(ge) 輪播圖並不簡單,用上viewpage再設置圓點,折騰一通之後還一堆bug.今天嚐試微信小程序開發做輪播圖,真是感動的淚流滿麵.廢話說完了,上圖.

上圖就是一個(ge) 簡易的輪播圖,是不是很簡易.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>

這裏有幾個(ge) 屬性需要說明.

微信小程序開發的循環用到了<block wx:for >

我這裏是遍曆movies[]數組.<swiper-item>就是item

2.index.js

//index.js    

//獲取應用實例    

var app = getApp()    

Page({    

  data: {    

    movies:[    

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

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

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

    {url:'https://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沒啥區別.

不明白的看看開發文檔

Kaiyun体育官方全站入口服務SERVICE
谘詢
微信掃碼谘詢
電話谘詢
400-888-9358