小程序的滾動頁面叫什麼

1. 支付寶小程序Swiper 滾動圖 帶圓點和跳轉方式

```

<!-- 滾動圖 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%;height:300rpx">

                <!-- lazy-load根據需要 onTap可以點擊圖片跳轉 data-url綁定到跳轉的鏈接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flex;width:100%;height:300rpx"

                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />

            </view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圓點 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//圖片的路徑

            url:""//要跳轉的路徑

        },

                {

            image:'',

            url:""

        }

    ],

    current: 0,//初始化dot

},

//監聽current

currentHandle(e) {

console.log(e)

    //改變current的值

    let { current } = e.detail

    this.setData({

      current

    })

},

```

```

.swiper-box {

  padding: 0 30rpx;

}

.swiper-item {

  border-radius: 10rpx;

  overflow: hidden;

}

.swiper_dot {

  display: flex;

  flex: 1;

  justify-content: center;

  position: absolute;

  bottom: 16rpx;

  left: 42%;//通過絕對定位 在滾動圖的正下方 具體看自己

}

.MR10 {

  margin-right: 10rpx;

}

.trans {

  width: 23rpx;

  height: 8rpx;

  background-color: #ffffff70;

  border-radius: 3.5rpx;

  transition: width 0.5s linear;

}

.active {

  background-color: #ffffffd7;

  width: 67rpx;

  transition: width 0.5s linear;

}

```

---轉自我的自個的

支付寶小程序Swiper 滾動圖 帶圓點和跳轉方式_多甘范科夫斯基的博客-CSDN博客

2. 微信小程序scroll-view 能自動滾動嗎

scroll-view為滾動視圖，分為水平滾動和垂直滾動。注意滾動視圖垂直滾動時一定要設置高度否則的話scroll-view不會生效。

3. 微信小程序：scroll-view滾動組件

在開發微信小程序時，有時一些視圖在手機指定的寬度和高度不夠存放，那麼可以放在scroll-view中。

在給scroll-view設置滾動的時候，分為三個步驟：

在給scroll-view設置滾動的時候，分為兩個步驟：

滾動到指定的id元素位置，並且給滾動的過程添加動畫

4. 小程序中web-view怎麼跳轉到不同的頁面

微信小程序實現頁面內的跳轉——scroll-view

需求：在頁面內我們常常會寫這樣一個效果，一個a標簽href=」#id」點擊會跳轉到本頁面的某個模塊。微信小程序里我們要實現這個效果需要用到scroll-view組件

官方組件介紹：/debug/wxadoc/dev/component/scroll-view.html?t=2017112

問題：我第一次嘗試這個組件的時候應用到自己的項目里發現完全沒有反應

然後我開始檢查我的代碼：

Scroll-y=」true」設置--ok

Js頁

Page({

onLoad:function(){

var that=this

wx.getSystemInfo({

success: function(res) {

that.setData({

systemInfo:res

})

that.update()

}

})

},

data:{

viewID:'main',

systemInfo:{}

},

toBuyCar:function(){

var id='buyCar'

this.setData({

viewID:id

})

}

})

頁面上wxml

<scroll-viewstyle="height:{{systemInfo.windowHeight}}px;"scroll-into-view="{{viewID}}" scroll-y="true">

5. 微信有個小程序，可以把字弄成滾動的。在哪裡啊

在H5中，當把頁面向上滑動時，可以發起ajax請求動態載入數據。在小程序中可以么實現么?
目前在文檔中，只看到有向下拉實現動態載入數據的組件
可以bindscrolltoupper是滾動到頂部/左邊事件，bindscrolltolower滾動到底部/右邊事件
利用"onPullDownRefresh"和"onReachBottom"方法
在js文件里直接寫"onPullDownRefresh"和"onReachBottom"方法即可;

6. 微信小程序之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}

7. 微信小程序顯示打字的叫什麼

微信小程序自帶的API中的頁面交互功能，雖然提示功能非常全面，但是所有的交互API中是沒有可以自己在提示框中輸入文本的功能，那麼現在我們來自己做這樣的一個提示框（可以帶有輸入功能），在提示框輸入完內容之後，點擊確定，可以將文本內容返回，點擊取消則可以回到之前的狀態。

（在這里，主頁面的布局可以根據每個人的想法來布局，這里展示的css之後展示提示框部分的）

1、首先打開微信開發者工具，建立一個代碼模板，那麼我們這個提示框就是寫在這個頁面上。

    這里我們主頁面叫做index

2、在基本頁面中寫上一個姓名的文本，當前姓名用<text>{{stuName}}</text>表示，然後為一個button按鈕，再在js文件中，建立相應的點擊事件以及stuName的信息。這樣，一個原始頁面就寫好了。

下面我們開始彈出框頁面的製作

<view class='toast-box' hidden='{{!ifName}}'>
<view class='toastbg'></view>
<view class='showToast'>
<view class='toast-title'>
<text>修改姓名</text>
</view>
<view class='toast-main'>
<view class='toast-input'>
<input placeholder='請輸入姓名' bindinput='setValue' data-name='stuEidtName'></input>
</view>
</view>
<view class='toast-button'>
<view class='button1'>
<button catchtap='cancel'>取消</button>
</view>
<view class='button2'>
<button catchtap='confirm'>確定</button>
</view>
</view>
</view>
</view>

3、我們可以發現，點擊按鈕後彈出輸入框，如果點擊除取消和確定之外的地方，是不會有反應的。為了做到這個功能，我們用一個絕對位置的渲染層（toastbg），覆蓋住整個頁面，並且如果你的頁面長度沒有滾動的話，請輸入min—height：100vh，如果頁面發生滾動，請把長度控制在height：100%即可看到整個頁面都被覆蓋。並且這個覆蓋的頁面要表現為透明，opacity：0.2，即可

4、bindinput為寫文本時所觸發的事件，data-name為文本數據所保存的地方，在js中我們可以把這個數據列印出來，會發現我們所輸入的文本信息。

以下為css的代碼

.toast-box {
width: 100%;
height: 100%;
opacity: 1;
position: fixed;
top: 0px;
left: 0px;
}

.toastbg {
opacity: 0.2;
background-color: black;
position: absolute;
width: 100%;
min-height: 100vh;
}

.showToast {
position: absolute;
opacity: 1;
width: 70%;
margin-left: 15%;
margin-top: 40%;
}

.toast-title {
padding-left: 5%;
background-color: #2196f3;
color: white;
padding-top: 2vh;
padding-bottom: 2vh;
border-top-right-radius: 16rpx;
border-top-left-radius: 16rpx;
}

.toast-main {
padding-top: 2vh;
padding-bottom: 2vh;
background-color: white;
text-align: center;
}

.toast-input {
margin-left: 5%;
margin-right: 5%;
border: 1px solid #ddd;
padding-left: 2vh;
padding-right: 2vh;
padding-top: 1vh;
padding-bottom: 1vh;
}

.toast-button {
display: flex;
}

.button1 {
width: 50%;
}

.button2 {
width: 50%;
}

.button1 button {
width: 100%;
background-color: white;
color: red;
border-radius: 0px;
border-bottom-left-radius: 16rpx;
}

.button2 button{
width: 100%;
background-color: white;
color: black;
border-radius: 0px;
border-bottom-right-radius: 16rpx;
}

.picker {
padding-top: 1vh;
padding-bottom: 1vh;
}
我們可以根據自己的喜歡，對提示框的樣式進行改變

5、編寫js代碼，我們需要實現以下一些基本功能（點擊出現彈窗，取消不改變數據值，確定進行判斷數據值，若為空則不能改變，否則可以改變，並且主頁面上的內容要變為相應改變後的內容）

6、給最外層的彈窗附上hidden（如圖所示），為這個值初始為false，點擊按鈕後觸發事件，改false為true，這樣即可點擊出現彈窗。

7、為取消按鈕附上點擊事件，與hidden的部分剛好相反即可。

8、為書寫文本綁定事件，上述代碼中命名為setValue，這個函數我們傳入一個event進去，將其列印，我們可以發現在其的detail中有我們剛剛所書寫的內容，我們將這個值，傳給js中data一個屬性，這里我們命名為edit。

9、為確定綁定事件，用this.data.edit將這個值進行判斷，若為空，我們用wx.showToast提示用戶信息沒有填寫完整，並且頁面不會改變。若不為空，則我們setData一下我們的stuName為這個edit的值，並且重新把hidden的屬性值改為false。

10、返回到初始頁面我們就可以看到我們自己做得一個提示框，並且具有修改值的功能