色婷婷五月综合久久中文_亚洲性爱毛片免费看_21国产精品喷潮白浆_国产精品无码亚洲精品2022_久久久亚洲国产精品性色

Menu
小程序資訊
小程序資訊
微信小程序?qū)W習(xí)點(diǎn)滴《二》:開(kāi)發(fā)者工具快捷鍵,輪播圖 swiper圖片組件 ...
時(shí)間:2016-10-17 13:04:00

一:開(kāi)發(fā)者工具快捷鍵

微信小程序已經(jīng)跑起來(lái)了.快捷鍵設(shè)置找了好久沒(méi)找到,完全憑感覺(jué).圖貼出來(lái).大家看看.

我現(xiàn)在用的是0.10.101100的版本,后續(xù)版本更新快捷鍵也應(yīng)該不會(huì)有什么變化.

現(xiàn)在貌似不能修改.如果有同學(xué)找到修改的方法,麻煩告訴我

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

常用快捷鍵

格式調(diào)整

  • Ctrl+S:保存文件
  • Ctrl+[, Ctrl+]:代碼行縮進(jìn)
  • Ctrl+Shift+[, Ctrl+Shift+]:折疊打開(kāi)代碼塊
  • Ctrl+C Ctrl+V:復(fù)制粘貼,如果沒(méi)有選中任何文字則復(fù)制粘貼一行
  • Shift+Alt+F:代碼格式化
  • Alt+Up,Alt+Down:上下移動(dòng)一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下復(fù)制一行
  • Ctrl+Shift+Enter:在當(dāng)前行上方插入一行

光標(biāo)相關(guān)

  • Ctrl+End:移動(dòng)到文件結(jié)尾
  • Ctrl+Home:移動(dòng)到文件開(kāi)頭
  • Ctrl+i:選中當(dāng)前行
  • Shift+End:選擇從光標(biāo)到行尾
  • Shift+Home:選擇從行首到光標(biāo)處
  • Ctrl+Shift+L:選中所有匹配
  • Ctrl+D:選中匹配
  • Ctrl+U:光標(biāo)回退

界面相關(guān)

  • Ctrl + \:隱藏側(cè)邊欄
二:輪播圖 swiper圖片組件

照著開(kāi)發(fā)文檔嘗試,總是能有所收獲.之前做Android開(kāi)發(fā),做個(gè)輪播圖并不簡(jiǎn)單,用上viewpage再設(shè)置圓點(diǎn),折騰一通之后還一堆bug.今天嘗試微信小程序開(kāi)發(fā)做輪播圖,真是感動(dòng)的淚流滿(mǎn)面.廢話說(shuō)完了,上圖.

上圖就是一個(gè)簡(jiǎn)易的輪播圖,是不是很簡(jiǎn)易.23333

主要是代碼也很簡(jiǎn)單.

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>

這里有幾個(gè)屬性需要說(shuō)明.

微信小程序開(kāi)發(fā)的循環(huán)用到了<block wx:for >

我這里是遍歷movies[]數(shù)組.<swiper-item>就是item

2.index.js

//index.js    

//獲取應(yīng)用實(shí)例    

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不多說(shuō),跟CSS沒(méi)啥區(qū)別.

不明白的看看開(kāi)發(fā)文檔

咨詢(xún)
微信掃碼咨詢(xún)
電話咨詢(xún)
400-888-9358