微信小程式實現web端錨點功能

阿新 • • 發佈：2018-12-13

1.wxml佈局樣式

<view class='container'>

<view class='left'>

<scroll-view class='leftScroll' scroll-y>

<block wx:for="{{list}}" wx:key="list">

<view bindtap='clickScroll' data-id="{{item}}">{{item}}</view>

</block>

</scroll-view>

</view>

<view class='right'>

<scroll-view class='rightScroll' scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true">

<block wx:for="{{list}}" wx:key="list">

<view bindtap='clickScroll' id="{{item}}">{{item}}</view>

</block>

</scroll-view>

</view>

2.wscc樣式

page{

width:100%;

height:100%;

}

.container{

flex-direction: row;

height:100%;

}

.left{

width:100px;

height:80%;

}

.left scroll-view{

height:100%;

}

.left view{

padding:10px;

text-align: center;

background-color:#0f0;

margin-bottom:10px;

color:#fff;

}

.right{

flex:1;

height:80%;

}

.right scroll-view{

height:100%;

}

.right view{

height:150px;

background-color:#f00;

color:#fff;

margin-bottom:10px;

}

3.js

Page({
data: {
list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29", "list30"],
toView: ''
},
clickScroll:function(e){
var id = e.currentTarget.dataset.id
this.setData({
toView:id
})
console.log(e.currentTarget.dataset);
},
})

微信小程式實現web端錨點功能

1.wxml佈局樣式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <view class='container'> <view class='left'>

生產製造追溯系統-通過微信小程式實現移動端報表平臺

前言前兩篇文章主要梳理了一下在生產過程中如何更高效、更穩定的實現條碼列印，有不少園子裡的朋友私信我，互相討論了一些技術方面的問題，雙方都各有收穫，再此感謝部落格園提供的這個交流平臺，讓五湖四海的朋友能夠匯聚在一起，互相學習、互相進步！！生產製造追溯系統-條碼列印生產製造追溯系統-再說條碼列印 &

微信小程式實現給迴圈列表點選新增類（單項和多項）

在微信小程式裡面沒有DOM物件, 不能操作DOM. 所有的操作通過資料來實現，下面主要實現了給迴圈列表點選新增類的操作一、單項目標需求：實現下圖，給點選的view增加類，每次只能選擇一個。主要思路：給點選的view增加類，

微信小程式實現複製到剪貼版功能

實現API： wx.setClipboardData(Object object) API說明：設定系統剪貼簿的內容屬性型別預設值是否必填說明支援版本

微信小程式：web-view巢狀H5實現微信支付功能解決方案及填坑

最近一個多月加班比較嚴重，偶爾休息一天也是在補睡眠+陪家人，比較長時間沒有來進行總結記錄了。今天不加班，開始為這段時間做的東西進行下經驗總結。這段時間因為公司需要，接觸了一些.Net前後臺開發，慢慢了解了一些WCF、H5站點、WebService、Soap、Linq等，也

ios端微信小程式，web-view頁面白屏，安卓正常顯示

今天小程式上線，ios端小程式有的頁面白屏，後來查到的問題是web-view的src中攜帶的引數中含有中文，ios端是不允許連結中有中文的，所以只能給中文轉碼了，h5頁面提取引數的時候再解碼一下就可以了介紹一下javascript中，轉碼和解碼的兩種方法

微信小程式實現與後臺PHP互動

微信小程式實現與後臺PHP互動接下來將講後臺如何與前臺進行資料及圖片之間的互動，相信這一點是很多人所關注的，因為當時我實在團隊中負責後臺開發，因此對前端不是特別瞭解，這裡我會貼出前端開發時的部分程式碼截圖，微信小程式的官方api介紹地址是： https://mp.weix

微信小程式實現倒計時計時器

微信小程式驗證碼倒計時*秒 var timer = setInterval(function () { lastTime--; that.setData({ codeText:

微信小程式實現驗證碼倒計時效果

效果圖 wxml <input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='i

微信小程式實現星星評價效果

程式碼實現 wxml檔案 ? 1 2 3

微信小程式實現點贊、取消點贊功能

最近接觸到小程式，發現很有意思，在專案中遇到了一點小問題，就是點贊+取消點贊有些衝突，還有就是多項的點選，話不多說咱們直接上程式碼！效果圖 wxml ? 1

微信小程式實現模組

.container{ background-color: white; margin: 10rpx 20rpx 10rpx 20rpx; -moz-box-shadow: 2rpx 2rpx 5rpx #969696; -webkit-box-shadow: 2rpx 2rpx 5

微信小程式實現滾動載入更多

微信小程式實現滾動載入更多 1.需要用到的元件和api scroll-view（可滾動檢視區域） wx.showToast(OBJECT)顯示訊息提示窗 2.需要用到的屬性

微信小程式實現顯示和隱藏控制元件-頭像-取值-bindblur事件

微信小程式實現顯示和隱藏控制元件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: b

微信小程式實現輪播圖

swiper的相關屬性 indicator-dots 是否顯示小圓點，也可以自己重新設定小圓點 circular 是否銜接滑動，就是實現無限滾動 previous-margin 與上一張圖片的間距 next-margin 與下一張圖片的間距 autoplay 實現自動滾

微信小程式實現css 瀑布流佈局方法

在微信小程式中經常使用瀑布流來進行頁面的佈局，今天就遇到了這樣的情況，之前是一直用flex佈局來著，但是flex佈局帶來的問題是圖片高度不同那麼進行佈局的時候有些圖片的下面就會留出很多富餘的空間這樣看著就不是很好了，所以在這裡採用瀑布流的方法：Multi-column,廢話少說上程式碼： ind

微信小程式實現手指觸控畫板

本文例項為大家分享了微信小程式實現手指觸控畫板的具體程式碼，供大家參考，具體內容如下 1、WXML 程式碼   <view class='alert' hidden='{{alertShow}}'

微信小程式實現電商平臺中的新增商品規格

技術交流請加QQ：2272172668 。也可以通過QQ號搜尋微信。在電商平臺中肯定少不了新增商品規格的功能。上傳動態圖失敗了，哎，只能看靜態圖了。如圖：就是一個商品裡邊有很多給個好多個屬性。之前用JQ的時候還是比較容易寫出來的。因為在JQ中可以直接操作dom，直接對

微信小程式實現類似append

1、wxml <view class='item' > //顯示已存在的圖片列表,點選刪除刪除前一個view <view wx:for="{{imgList}}"> <view class='imgList'>{{item.pict

微信小程式實現跑馬燈效果（完整程式碼）

在微信小程式裡實現跑馬燈效果，類似滾動字幕或者滾動廣告之類的，使用簡單的CSS樣式控制，沒用到JS，效果如下圖： Wxml程式碼：  <view class="marquee_container" st

微信小程式實現web端錨點功能

相關推薦