怎么在微信小程序中實現(xiàn)一個錨點功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在微信小程序中實現(xiàn)一個錨點功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計,集團網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。選擇創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 內(nèi)容 -->
<view class='bg-white m-t10'>
 <view class='flex'>
 <view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}'
 data-id="{{index}}" bindtap='navHandleClick'
  wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view>
 </view>
 
 <view class='has-padding-sm'>
 <!-- 實時停電信息 -->
 <view>
  <view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">
 
  <view class='itembox' id='{{item.id}}'>
   <view class='titlebox flex'>
   <view class='flex-1 text-ellipsis'>{{item.name}}</view>
   <view class='f12'>
    <text class='icon icon-like-o inline-middle'></text>
    <text class='inline-middle m-l5'>加入關(guān)注</text>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>電網(wǎng)故障停限電</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>預(yù)計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>
    </view>
    </view>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>電網(wǎng)故障停限電</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送電時間:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>預(yù)計</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電范圍:</text>
     <text class='f12 c6'>[開福區(qū)] 湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、湘江世紀(jì)城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停電區(qū)域:</text>
     <text class='f12 c6'>湖南省長沙市開福區(qū)</text>
    </view>
    </view>
   </view>
   </view>
 
  </view>
 
  </view>
  <view class='text-center p-t10 f12 c9'>
  沒有更多信息了
  </view>
 </view>
 
 </view>
 
</view>
</scroll-view>
 
<!-- 導(dǎo)航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滾動到離頂部一定距離在顯示導(dǎo)航按鈕 -->
 <view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>導(dǎo)航</view>
 <view class='navconbox' hidden='{{isnavfixed}}'>
 <view class='floor gotop' catchtap='gotop'>返回頂部</view>
 <view class='floor' bindtap='clickScroll' data-id="{{item.id}}"
  wx:for="{{navlist}}" wx:key="{{index}}">
  {{item.name}}
  </view>
 </view>
</view>

Page({
 data: {
 isnavfixed:true, //是否顯示浮動導(dǎo)航
 toView:'', //顯示區(qū)域
 navlist: [//地區(qū)數(shù)據(jù)
  {
  id:"list0",
  name:'市區(qū)河?xùn)|'
  },
  {
  id: "list1",
  name: '市區(qū)河西'
  },
  {
  id: "list2",
  name: '長沙縣'
  },
  {
  id: "list3",
  name: '望城區(qū)'
  },
  {
  id: "list4",
  name: '瀏陽市'
  },
  {
  id: "list5",
  name: '寧鄉(xiāng)市'
  }
 ],
 scrollTop: {//豎直滾動的位置
  scroll_top: 0, 
  goTop_show: false
 }
 },
 navfixedHandleClick(){
 // 浮動導(dǎo)航
 this.setData({
  isnavfixed: !this.data.isnavfixed
 });
 },
 scrollTopFun: function (e) {
 // 頁面滾動到一定位置顯示導(dǎo)航
 if (e.detail.scrollTop > 200) {
  this.setData({
  'scrollTop.goTop_show': true
  });
 } else {
  this.setData({
  'scrollTop.goTop_show': false
  });
 }
 },
 gotop(){
 //返回頂部,
 var _top = this.data.scrollTop.scroll_top;
 _top == 1 ? _top = 0 : _top = 1
 this.setData({
  'scrollTop.scroll_top': _top,
  'isnavfixed':true
 });
 console.log(this.data.scrollTop);
 },
 clickScroll: function (e) {
 //點擊導(dǎo)航菜單滾動
 var toView = e.currentTarget.dataset.id
 this.setData({
  "toView": toView,
  'isnavfixed': true
 })
 }
})

主要用到 scroll-view 組件 scroll-into-view 屬性；當(dāng)點擊導(dǎo)航菜單的時候，我們改變相應(yīng)的 scroll-into-view 的值，并且同時需要在 scroll-view 組件內(nèi)相應(yīng)位置處的子元素上定義相應(yīng)的 id；因為scroll-into-view 值應(yīng)為某子元素 id，設(shè)置哪個方向可滾動，則在哪個方向滾動到該元素。

scroll-view 組件使用的一些注意點：

1. scroll-into-view 與上面提到的子元素id 不能以數(shù)字開頭

2.bindscroll 屬性實時監(jiān)聽滾動；如上面頁面滾動到一定位置顯示導(dǎo)航按鈕功能

3.scroll-top 、scroll-left 屬性：設(shè)置豎向或者橫向滾動條位置，如上面返回頂部功能

4.scroll-with-animation 屬性：滾動平滑過渡，提高體驗

5.如果需要隱藏 scroll-view 的滾動條使用 css ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

6.如果scroll-view占頁面整個高度，可設(shè)置 scroll-view的高度 height:100vh , 設(shè)置height:100%無效

上述就是小編為大家分享的怎么在微信小程序中實現(xiàn)一個錨點功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：怎么在微信小程序中實現(xiàn)一個錨點功能-創(chuàng)新互聯(lián)
文章路徑：http://bm7419.com/article18/dpdidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、企業(yè)建站、靜態(tài)網(wǎng)站、軟件開發(fā)、小程序開發(fā)、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容