有一些重要的關鍵點請看上一篇文章

主要用到scroll-into-view  如果你想讓他回頂部 直接用scroll-top即可

話不多說,看程式碼

wxml

1. <scroll-viewscroll-y="true"scroll-into-view="{{toView}}">
2.   <viewclass="brand"wx:for="{{brandList}}">
3.     <viewclass="line"></view>
4.     <viewid="{{item.wordindex}}"class="wordindex">{{item.wordindex}}
   </view>
5.     <viewclass="line"></view>
6.     <viewclass="brand_block">
7.       <viewclass="color_view"wx:for="{{item.brand}}"bindtap="click">
8.         <imagesrc="{{item.brandimg}}"></image>
9.       </view>
10.     </view>
11.   </view>
12. </scroll-view>
13. <viewclass="index"
    >
14.   <textwx:for="{{wordindex}}"bindtap="choiceWordindex"data-wordindex="{{item.wordindex}}">
15.     {{item.wordindex}}  
16.   </text>
17. </view>

1. // pages/order/car/add_car/car_brand/car_brand.js
2. var app = getApp()  
3. Page({  
4.   data: {  
5.     "brandList": [],  
6.     "wordindex"
   : [],  
7.     "toView": '#',  
8.   },  
9.   onLoad: function (options) {  
10.     var that = this;  
11.     // 頁面初始化 options為頁面跳轉所帶來的引數
12.     app.func.req('getCarBrand?cx=1', function (res) {  
13.       if (res.data.result == 'false') {  
14.         console.log('false');  
15.         that.wetoast.toast({  
16.           title: res.data.msg,  
17.           duration: 2000  
18.         })  
19.       } else {  
20.         that.setData({  
21.           brandList: res.data.brandList,  
22.           wordindex: res.data.brandList,  
23.         });  
24.         var cData = that.data.brandList;  
25.         cData[0].wordindex = "#";//先修改json值
26.         that.setData({ //再set值
27.           wordindex: cData  
28.         })  
29.       }  
30.     }, function (res) {  
31.     });  
32.   },  
33.   onReady: function () {  
34.     // 頁面渲染完成
35.   },  
36.   onShow: function () {  
37.     // 頁面顯示
38.   },  
39.   onHide: function () {  
40.     // 頁面隱藏
41.   },  
42.   onUnload: function () {  
43.     // 頁面關閉
44.   },  
45.   click: function () {  
46.     wx.navigateTo({  
47.       url: '/pages/order/car/add_car/car_model/car_model',  
48.     })  
49.   },  
50.   choiceWordindex: function (event) {  
51.     let wordindex = event.currentTarget.dataset.wordindex;  
52.     if (wordindex == '#') {  
53.       this.setData({  
54.         toView: '常用品牌',  
55.       })  
56.     } else {  
57.       this.setData({  
58.         toView: wordindex,  
59.       })  
60.     }  
61.     console.log(this.data.toView);  
62.   }  
63. })  

wcss:

1. /* pages/order/car/add_car/car_brand/car_brand.wxss */
2. scroll-view {  
3.   height: 600px;  
4.     float: left;  
5.   width: 94%;  
6. }  
7. .wordindex {  
8.   line-height: 50rpx;  
9.   background: #f7f7f7;  
10.   font-size: 14px;  
11.   color: #929292;  
12.   padding-left: 28rpx;  
13. }  
14. .color_view {  
15.   text-align: center;  
16.   display: inline-flex;  
17.   flex-direction: column;  
18. }  
19. .brand_block {  
20.   margin-top: 28rpx;  
21.   margin-left: 28rpx;  
22. }  
23. image {  
24.   width: 140rpx;  
25.   height: 140rpx;  
26.   margin-right: 24rpx;  
27.   margin-bottom: 24rpx;  
28.   border-style: solid;  
29.   border-width: 1rpx;  
30.   border-color: #ededed;  
31. }  
32. .index {  
33.   float: right;  
34.   position: fixed;  
35.   right: 0;  
36.   margin-top: 20%;  
37.   margin-right: 10rpx;  
38.   color: #e0004a;  
39.   font-size: 11px;  
40. }  
41. .index text {  
42.   display: flex;  
43.   line-height: 18rpx;  
44. }  
    相關推薦

    微信小程式-scroll-view滾動到索引位置(二)

    有一些重要的關鍵點請看上一篇文章 主要用到scroll-into-view  如果你想讓他回頂部 直接用scroll-top即可 話不多說,看程式碼 wxml <scroll-view scroll-y="true" scroll-into-view="{{to

    微信小程式 scroll-view滾動到索引位置

    有一些重要的關鍵點請看上一篇文章主要用到scroll-into-view  如果你想讓他回頂部 直接用scroll-top即可話不多說,看程式碼wxml<scroll-viewscroll-y="true"scroll-into-view="{{toView}}">

    微信小程式----scroll-view元件（MUI索引列表）滾動動畫

    效果圖 實現原理 利用scroll-view的scroll-into-view屬性進行定位； 利用scroll-view的scroll-with-animation屬性實現滾動動畫

    微信小程式scroll-view（滾動元件）與onPullDownRefresh（下拉重新整理）

    一.官方api描述  在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh  查閱大量資料以後發現一共有三種方式： 1.使用view代替scroll-v

    微信小程式scroll-view橫向滾動真機測試失敗

    問題描述： 微信小程式的scroll-view設定橫向滾動，在開發工具上顯示效果是正常的，但是在真機上測試橫向滑動的時候，整個手機螢幕跟著左移 解決： css樣式的問題：將scroll-view的樣式

    微信小程式 scroll-view橫向滾動 坑

    看到有人將scroll-top屬性用在了scroll-x=true的scroll-view元件上，問題顯而易見 scroll-top=”10”設定豎向滾動條位置 scroll-x=”

    微信小程式scroll-view，點選menu，滾動到錨點；滾動到錨點，啟用menu。

    首先看看效果圖1、首先是點選選單，滾動列表，這個實現比較簡單。直接使用scroll-view 的 scroll-into-view屬性，小程式文件。<view class='container'> <!-- 選單 --> <view clas

    微信小程式 scroll-view 實現橫向、縱向滾動

    1.縱向滾動 api文件有註明，<scroll-view scroll-y style="height: 400rpx;">   1231231231</scroll-view> 即 如果是縱向滾動，必須指定滾動區域的高度 2.橫向滾動 核心思

    微信小程式scroll-view無法準確滾動到頁面最底部

    最近在做一個模擬微信聊天頁面的小程式，在使用<scroll-view>元件的scroll-into-view屬性使頁面自動滾動到頁面最底部的時候，發現經常出現滾了一半又滾回去了。後來發現是因為我發出一條訊息之後伺服器會立刻返回一條訊息，短時間內改變了 scroll

    微信小程式 scroll-view橫向滾動軸 怎麼出現？

    <!--可滾動檢視區域。scroll-view 開始 -->    <scroll-view class='scroll_vide_waiceng' scroll-x="true"

    微信小程式 scroll-view 實現錨點跳轉

    在微信小程式中，使用scroll-view實現長頁面的標記跳轉，官方文件中沒有例子演示，錨點標記主要是使用<scroll-view>的scroll-into-view屬性。 實現錨點跳轉主要以下幾點： 1，最外層容器使用滾動檢視  2，賦值滾動到檢視，如：<s

    微信小程式 scroll-view 橫向劃不動

    當是垂直滾動的時候,官網的例項即可完成  當是水平滾動的時候,注意: <view class="a-scroll"> <scroll-view scroll-x class="my-scroll"> <view

    微信小程式scroll-view和元件

    scroll-view的css樣式很坑   按照下邊這個 .scroll-view_H{   white-space: nowrap; } .scroll-view-item{   height: 200px; }

    微信小程式 scroll-view實現錨點滑動

    轉載，原文： 微信小程式 scroll-view實現錨點滑動的示例  https://www.jb51.net/article/129897.htm 選擇scroll-view(可滾動檢視區域)元件來實現錨點效果。 具體實現 具體API就不贅述了，可以

    微信小程式-scroll-view上拉多次觸發載入事件

    之前那篇部落格裡邊寫了滑塊的margin屬性影響了滑動效果。這篇文章寫一下上拉時多次觸發上拉載入事件。 （改好的程式碼如下） 其實也比較簡單，就是有可能沒有意識到這個小細節。在官方文件中有這麼一個屬性（如圖）。這個屬性是設定距離底部多少距離是觸發事件。我們吧這個屬性設定成0就可以了。只有上拉到最

    微信小程式scroll-view元件自適應不同高度的手機

    已知微信相比於H5開發有rpx這個單位可以自適應一些不同寬度的手機，但是有的時候需要自適應一些手機高度賊大的手機比如iphoneX系列 所以scroll-view的wxss樣式裡肯定不能寫死，我能想到的方法就是js裡頭載入畫面前再設定高度 wxml裡 <scrol

    微信小程式 scroll-view 滑動可視區域

    微信小程式 sroll-view  css屬性設定注意事項 1.sroll-view 必須設定 white-space: nowrap   段落文字中不換行 2.子元素需要設定為 內聯塊元素 display:in

    微信小程式scroll-view的例項

    近來團隊讓寫一個小程式專案，在寫某個模組首頁列表時，打算採用分頁方式請求後臺，下拉載入更多。 用到官方的一個關鍵標籤 scroll-view。 程式碼如下： 一.在wxml檔案中： <view class='tipsbar'>共有{{total}}個待簽收

    微信小程式 scroll-view 填滿剩餘可用高度

    發表於 2018-08-10 | 更新於 2018-08-15 | 分類於 專案記錄 ， 小程式 根據微信小程式 scroll-view 文件所述，scroll-view必須給定一個固定高度。那麼如果我們想要讓它自動填充剩餘高度，該怎麼辦呢？ 前言 在說出我的解決方案之前，先來看一

    微信小程式 scroll-view 根據內容的高度自適應

     有問題可以掃碼加我微信，有償解決問題。承接小程式開發。 微信小程式開發交流qq群   173683895  、 526474645 ； 正文： 1 <video autoplay sr