小程序viewblock

⑴ 微信小程序scroll-view橫向顯示及異常顯示處理

在微信小程序開發過程中，我們會經常使用到scroll-view組件，有時我們要在scroll-view中水平顯示列表，類似這樣：

但是當我們設置了scroll-view的flex-direction:row;等屬性時，會發現沒有用，列表依然垂直顯示，像這樣：

主要是因為display:flex;等屬性對於scroll-view來說是沒有用的，此時我們只需要設置子試圖的屬性display: inline-block;即可，不需要設置scroll-view的flex屬性。

但是當我們設置完成後可能會出現一下情況：

會發現列表好像沒有對齊，有兩個子試圖錯位了，接下來我們可以通過設置子屬性vertical-align:top;來解決，最後會得到我們想要的效果。

⑵ 小程序頂部文字太多

如果小程序頂部文字太多，建議如下操作方法/步驟:
1，分步閱讀打開我們的小程序項目
2，點擊項目目錄的「utils」➜"app.json"
3，修改"navigationBarTitleText"後面的雙引號裡面的文字就可以了。

⑶ 微信小程序怎麼設置文本換行(從後台拿的數據)

1、打開開發者工具，在項目的pages文件夾下，新建mypage文件夾，並在文件夾內新建mypage，並在app.json中將mypage設為第一頁面。

⑷ 微信小程序之scroll-view可滾動視圖區域

組件說明:

可滾動視圖區域。

組件用法：

縱向滾動用法

Tip:

使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height，否則無法滾動。

當滾動到頂部時會觸發bindscrolltoupper事件（具體可留意GIF輸出）

當滾動到底部時會觸發bindscrolltolower事件（具體可留意GIF輸出）

效果圖：

wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

    <view id="green" class="scroll-view-item bc_green"></view>

    <view id="red"  class="scroll-view-item bc_red"></view>

    <view id="yellow" class="scroll-view-item bc_yellow"></view>

    <view id="blue" class="scroll-view-item bc_blue"></view>

</scroll-view>

<view class="btn-area">

      <button size="mini" bindtap="tap">click me to scroll into view </button>

      <button size="mini" bindtap="tapMove">click me to scroll</button>

</view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滾動條滾到頂部的時候觸發

  upper: function(e) {

    console.log(e)

  },

  //滾動條滾到底部的時候觸發

  lower: function(e) {

    console.log(e)

  },

  //滾動條滾動後觸發

  scroll: function(e) {

    console.log(e)

  },

  //點擊按鈕切換到下一個view

  tap: function(e) {

    for (var i = 0; i < order.length; ++i) {

      if (order[i] === this.data.toView) {

        this.setData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通過設置滾動條位置實現畫面滾動

  tapMove: function(e) {

    this.setData({

      scrollTop: this.data.scrollTop + 10

    })

  }

})

css

.scroll-view_H{

  white-space: nowrap;

}

.scroll-view-item{

  height: 200px;

}

.scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

橫向滾動用法

Tip:

橫向滾動無法使用scroll-into-view屬性。

當滾動到最左邊時會觸發bindscrolltoupper事件（具體可留意GIF輸出）

當滾動到最右邊時會觸發bindscrolltolower事件（具體可留意GIF輸出）

效果圖：

wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">

    <view id="green" class="scroll-view-item_H bc_green"></view>

    <view id="red"  class="scroll-view-item_H bc_red"></view>

    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>

    <view id="blue" class="scroll-view-item_H bc_blue"></view>

</scroll-view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滾動條滾到頂部的時候觸發

  upper: function(e) {

    console.log(e)

  },

  //滾動條滾到底部的時候觸發

  lower: function(e) {

    console.log(e)

  },

  //滾動條滾動後觸發

  scroll: function(e) {

    console.log(e)

  },

  //點擊按鈕切換到下一個view

  tap: function(e) {

    for (var i = 0; i < order.length; ++i) {

      if (order[i] === this.data.toView) {

        this.setData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通過設置滾動條位置實現畫面滾動

  tapMove: function(e) {

    this.setData({

      scrollLeft: this.data.scrollLeft + 10

    })

  }

})

wxss

.scroll-view_H{

  white-space: nowrap;

}

.scroll-view-item{

  height: 200px;

}

.scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

主要屬性：

屬性類型默認值描述

scroll-xBooleanfalse允許橫向滾動

scroll-yBooleanfalse允許縱向滾動

upper-thresholdNumber50距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件

lower-thresholdNumber50距底部/右邊多遠時（單位px），觸發 scrolltolower 事件

scroll-topNumber設置豎向滾動條位置

scroll-leftNumber設置橫向滾動條位置

scroll-into-viewString值應為某子元素id，則滾動到該元素，元素頂部對齊滾動區域頂部

bindscrolltoupperEventHandle滾動到頂部/左邊，會觸發 scrolltoupper 事件

bindscrolltolowerEventHandle滾動到底部/右邊，會觸發 scrolltolower 事件

bindscrollEventHandle滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

⑸ 微信小程序增加不同的數據怎麼弄

打開微信小程序開發工具，創建項目，並新建頁面文件
2
/7
打開頁面文件，插入一個view標簽和block標簽，並添加wx:for循環指令
3
/7
接著新建一個頁面JavaScript文件，在data對象中初始化數組weeks
4
/7
保存代碼並查看左側的模擬器，可以查看到一個列表
5
/7
在view標簽下方，添加一個button按鈕，然後添加bindtap
6
/7
在對應的JS文件中，添加一個點擊事件addData，並列印數組結果
7
/7
打開內置瀏覽器控制台，查看列印結果

⑹ 支付寶小程序怎麼轉成微信小程序

把支付寶小程序和微信小程序的區別理清的話，把支付寶小程序和微信小程序進行相互轉換，其實很簡單

wxml:

把項目里axml後綴名的文件改成wxml，把acss後綴名的文件改成wxss，頁面里如果有axml也要改成wxml，acss改成wxss

onTap改成bindtap，其他事件名也要從支付寶小程序的駝峰命名法改成微信小程序的單詞之間的普通拼接

<input></input>改成<input/>

a:for改成wx:for

a:if改成wx:if

a:else改成wx:else

把show-count={{show_count}}改成把show-count="{{show_count}}"

我發現微信小程序用<text>會有很多bug，所以支付寶小程序里如果用了<text>，如果需要轉成微信小程序，就用<view>並給<view>加上浮動或者給<view>設置display:inline-block;來代替<text>，我目前發現的<text>的bug有：<text>有一個padding-top，而且控制台看不到。

支付寶小程序里可以用a:for="{{doc_item.datestr.split(',')}}"，微信小程序里不支持wx:for="{{doc_item.datestr.split(',')}}"，所以，為了兼容支付寶小程序和微信小程序2個端，在支付寶小程序里也不要用a:for="{{doc_item.datestr.split(',')}}"，可以在js里就對list進行修改：for(let i = 0,len = list.length;i < len;i++){ list[i].datestr = list[i].datestr.split(',');}

js:

藍牙：

錯誤提示：error.errorMessage改成error.errMsg

"pullrefresh":"true"改成"enablePullDownRefresh": true，下拉刷新頁面時如果需要調用某個函數，在onPullDownRefresh里寫

{{item.visitdate.substring(5, 7)}}這種語法在支付寶小程序里支持，在微信小程序里不支持，在list里加1個參數，來表示{{item.visitdate.substring(5, 7)}}

wx.uploadFile({fileName})改成wx.uploadFile({name})

wx.uploadFile返回的路徑從res.apFilePaths[0]改成res.tempFilePaths[0]

my.showToast({content})改成wx.my.showToast({title})

my改成wx

把

my.setStorageSync({

  key: 'currentCity',

  data: {}

});

改成

wx.setStorageSync(

'currentCity', account_id

);

非同步設置緩存，非同步獲取緩存，同步設置緩存，同步獲取緩存，都要改掉，但是我平時都是用非同步的

把e.target改成e.currentTarget

支付寶小程序里執行

that.setData({

            type : undefined

        });

不會報錯，但是在微信小程序里會報錯，所以，如果在微信小程序里要避免出現這種情況

模態框：

my.confirm改成wx.showModal

my.confirm里的屬性：

content改成title

confirmButtonText改成confirmText

cancelButtonText改成cancelText

支付寶小程序里，因為my.showLoading以後經常隱藏不了loading，所以在支付寶小程序里很少用到my.showLoading，微信小程序里可以用wx.showLoading

app.json:

navigationBarTitleText改成defaultTitle

"pullRefresh": true改成"enablePullDownRefresh":true

acss:

支付寶小程序給button設置display:block;是有效的，但是微信小程序的button有一個默認樣式button[size=mini]{display:inline-block;}，所以微信小程序里要給button的display、line-height、font-size、padding增加權重，比如給微信小程序里的button增加[size=mini]等

⑺ 小程序開發有哪些坑

做小程序開發運營需要注意兩個坑：

1. 來自商標注冊的坑

2. 來自投放廣告的坑
   

⑻ 微信小程序 獲取標簽裡面的數據 例如：view、text

在一些場景中，我們需要獲取到標簽裡面的值來和介面返回的值做對比，一致則進行下一步，後者進行錯誤判斷

<block wx:for='{{objectArray}}'  data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>

        <text class='yuzhong'>{{item.name}}</text>

    </view>

主要在於 data- 這個上面  上面的那個name 和 id 是我自己定義的，你們可以隨意定義一些語義化的詞，

獲取也很簡單：

select:function(e){

console.log(e.currentTarget.dataset.name);

    },

⑼ iPhone6微信小程序怎麼設置

微信小程序（下面簡稱小程序）近些月來刷爆了我們這些程序猿們的圈子，可以說無數的程序猿磨刀霍霍，准備在這快蛋糕上殺出一片天地。那麼作為前端開發人員，小程序開發和我們平常的開發有什麼不同的地方呢？讓我們一起來走進門里看看。 我們從下面幾個方向來了解一下小程序的開發： 1/debug/wxadoc/dev/framework/structure/debug/wxadoc/dev/devtools/download/debug/wxadoc/dev/component/?t=20161107） 組件的用法和標簽一樣，比如view組件< view>< / view>、text組件< text>< /view>。從寫法上看起來和標簽寫法沒什麼區別，但是這些組件和標簽最大的區別就是，組件本身設置了樣式，比如icon組件： <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"></icon> </block> </view> 我們只需要使用icon組件，不需要去自己設置樣式就可以得到對應的icon樣式。 在日常小程序開發中，比較常用的組件有view和text，其中用的最多的就是view，view本身並沒有默認太多的樣式，只有一個display:block樣式，所以在我看來view就類似於div，我們也就把它當作div來使用就行了，然後你就會發現布局的時候到處都是view~，就像下圖： 滿眼全是view這種寫法不需要像html一樣考慮語義、seo神馬的，非常的簡單粗暴~。 額外提一下text組件，text擁有view所沒有的一個特性就是text組件內的文本可以被復制、可以被復制、可以被復制（重要的事情說三遍~）。如果你希望某段文本可以被復制，那麼你只能使用text組件。同時需要注意的一點，text組件內部不能嵌套view組件！嵌套無效！ 2/debug/wxadoc/dev/framework/view/wxss.html?t=20161107 二、JS差異 雖然小程序的交互採用的是js的語法，但是最大的變化就在於小程序無法使用選擇器獲取到頁面的某個'dom'（應該不叫dom），這也是我們前端人員需要思路轉變的地方，以往我們習慣於獲取某個dom，然後這個dom上綁定各種事件，同時對頁面進行一些改變操作，但是小程序並沒有提供這種我們習慣的方法。 不能獲取dom，也不能直接操作dom，那我們該怎麼寫呢？ 1. bind 和 catch bind和catch的作用從字面意思就可以大致猜出是用來綁定某些東西的，沒錯，這是小程序提供綁定事件的兩個方法，而他們的區別在於bind不阻止冒泡，而catch阻止冒泡。小程序不提供獲取dom的操作，而是讓我們直接將事件綁定寫入到組件內，如下代碼： <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 看到這大家可能發現了bind後面跟著一個tap，這個tap是什麼東東？ 2. tap tap其實就是一個事件，你可以理解為click，不過在手機端叫做tap，其它的事件還有：touchstart、touchmove、touchcancel、touchend、longtap。 bindtap=」tapName」組合起來就是綁定個tap事件,tapName則是對應的方法名，在這里需要注意一點，調用方法時不能夠使用tapName(「txt」)這種形式來傳參，小程序不支持。那麼如果我們想要給方法傳遞一些參數該怎麼做呢？接著往下看。 3.event 我們先看一段代碼： Page({ tapName: function(event) { console.log(event) } }) 列印出來的結果: { "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] } 看到這么一堆東西大家可能有點暈，沒事，我們來捋一捋。這個event想來大家應該明白是什麼，event包含了目標對象的相關信息。那意味著，我們只要去修改目標對象的相關信息，就可以給tapName方法傳輸參數了。 那麼如何修改目標對象的相關信息呢？在這之前我們必須要先了解下currentTarget和target兩個屬性，前者是綁定事件的組件，後者是觸發事件的組件源。理解清楚這兩個屬性很重要！如果是上面例子這種情況，只有一個view組件，那麼這兩個屬性的值沒什麼區別，但是如果換成下面的這個例子，就不一樣了： <view id="tap1" data-hi="綁定組件" bindtap="tapName"> <view id="tap2" data-hi="觸發組件源"></view> </view> 我們再輸出看看（為了方便對比，只保留下currentTarget和target兩個屬性）: { "target": { "id": "tap2", "dataset": { "hi":"觸發組件源" } }, "currentTarget": { "id": "tap1", "dataset": { "hi":"綁定組件" } } } 通過這個例子就可以很清楚的發現，currentTarget對應的就是外層綁定了tapName方法的view組件，而target對應的則是內部的view組件。 通過兩個例子，相信大家也注意到了兩個屬性，data-hi和dataset，這兩個屬性有什麼關系呢？大家應該猜到了，dataset的值其實就是我們設置的data-xxx的值，而xxx則是dataset裡面的key。大家對於data-xxx的寫法應該不陌生，就是html中常見的自定義屬性的寫法，而在小程序中，則被用來傳參。 4. 改變樣式 前面就提到了小程序並不提供獲取和操作dom的能力，這就又帶來了一個問題，我們如何去動態的改變樣式呢？我們先看下例子： <view class="container" style="overflow: {{screenType?'hidden':'scroll-y'}}" bindtap="bindType"> Page({ data: { screenType: '' }, bindType: function(){ this.setData({ screenType: '1' }) } })</view> 大家是不是有點明白了呢，我們沒有辦法直接獲取dom然後去改變他的樣式，所以我們只能通過data里的屬性來控制樣式的變化，如上面的代碼，overflow的值取決於screenType的值是否存在，如果存在，則overflow: hidden，反之overflow: scroll-y；那麼我們只需要改變screenType的值。要改變screenType的值也簡單了，小程序提供了this.setData方法，可以設置data內的值。 四、其它 最後提一下我們熟悉的ajax請求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax沒什麼區別，唯一需要特別注意的是，請求必須是https請求！而不是平常的http請求！除了必須要是https請求以外，還需要到小程序的後台里設置合法域名，否則無法請求。 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。