この記事は、以前に WeChat ミニ プログラムを開発するときに遭遇した問題のいくつかを要約し、その解決策を共有します。
最新のミニ プログラム ドキュメントを参照してください~:
https://developers.weixin.qq.com/ebook?action= get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
#block を使用してリストをラップします
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>block は実際にはページ上にレンダリングされませんが、ラッピング要素としてのみ使用され、コントロール属性を受け入れます
カスタム コンポーネントを作成します
カスタム コンポーネントは 4 つの部分に分かれています
#properties コンポーネントが受け取るプロパティ
properties: {
// 输入框的默认提示
placeholder: {
type: String, // 属性值的类型
value: '' // 属性默认值
}
},data コンポーネント データ
methods コンポーネント メソッド (通常、内部メソッドは __
ライフ サイクルで始まります)コンポーネントの関数、通常はreadyを使用、コンポーネントのレイアウトが完了した後に実行、このときノード情報を取得できます(SelectorQueryを使用)
親コンポーネントによって渡されたメソッドを呼び出します
// 子组件
var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据
var myEventOption = {} // 触发事件的选项
this.triggerEvent('onclear', myEventDetail, myEventOption)<!-- 父组件 --> <searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar> <!-- 像绑定 bindtap 一样绑定自定义函数 -->
// 父组件
onSearch(e){
console.log(e.detail.value)
}#親コンポーネントは子コンポーネントのメソッドを直接呼び出します##// 父组件，使用 selectComponent 拿到子组件的实例，直接调用其中的方法
let searchBar = this.selectComponent('#search-bar');
searchBar.setData({ value: e.currentTarget.dataset.name })
searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});
// 获取屏幕宽度
let windowWidth = wx.getSystemInfoSync().windowWidth
// 在组件内部需要写 this
let query = wx.createSelectorQuery().in(this);
let that = this;
query.selectAll('.tagItem').boundingClientRect()
query.exec(function (res) {
let allWidth = 0;
res[0].map(item=>{
allWidth = allWidth + item.width
return allWidth
})
let length = res[0].length
let ratioWidth = allWidth / windowWidth
that.setData({
allLength: length,
iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533)
})
})の部分を書きました前にインターフェイスをonLoadに呼び出し、記事リストから詳細ページに入り、詳細ページの左上隅をクリックしてリストページに戻ると、リストページの閲覧数が更新されるはずですが、更新されません記事リストのインターフェースが再調整されていないため。
つまり、記事リストのインターフェースを調整する部分はonShowで書かれています。#カスタム タブバーの最適化
最初の最適化は、コンポーネントによってカプセル化されたタブバーをページのテンプレート フォームに変更することです 1. 以前はコンポーネント形式で記述していましたが、テンプレートに変更されました。タブバーをクリックすると点滅する問題を解決するために、タブバー上のアイコンは iconfont に変更されました。
<template name="tabbar">
<view class="tabbar-wrapper">
<block wx:for="{{tabbar.list}}" wx:key="item">
<navigator hover-class="none" class="tabbar_nav {{item.selected ?'selected':''}}" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="reLaunch">
<view class="tab-item"><text class="{{item.iconPath}}" style="width: {{item.iconWidth}};height: {{item.iconHeight}}"></text>{{item.text}}<text class='red-tag' wx:if="{{tabbar.num && index==1}}">{{tabbar.num > 99 ? '99+' : tabbar.num}}</text></view>
</navigator>
</block>
</view>
</template>2. タブバーをクリックしたとき、ジャンプする必要があるページにジャンプする前に、前のページを破棄する必要があるため、
reLaunch は 2 番目の最適化のナビゲーター コンポーネントとタブバーのあるページで使用されます。 setData でのタブの切り替え <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><homePage id="home-page" wx:if="{{tabbarID == tabbarList.home}}" bind:onclicktab="setTabbar" ></homePage>
<articleLibraryPage id="article-page" wx:if="{{tabbarID == tabbarList.article}}"></articleLibraryPage>
<doclistPage id="doctor-page" wx:if="{{tabbarID == tabbarList.doctor}}"></doclistPage>
<mePage id="me-page" wx:if="{{tabbarID == tabbarList.me}}"></mePage>
<tabbar id="tab-bar" bind:onclick="onClickTabbar" tabbarID="{{tabbarID}}"></tabbar></pre><div class="contentsignin">ログイン後にコピー</div></div> 変更点:
タブバーのあるページはコンポーネント形式に書き換えられます
コンポーネントにはマウントが完了した後のreadyメソッドしかないため、前ページのonShow、onReachBottom、onPullDownRefreshをすべて親ページに配置して
onPullDownRefresh: function () {
if (this.data.tabbarID === this.data.tabbarList.article) {
// 使用 selectComponent 找到组件实例，调用内部方法
let articlePage = this.selectComponent('#article-page');
articlePage.onPullDownRefresh();
} else if (this.data.tabbarID === this.data.tabbarList.doctor){
let doctorPage = this.selectComponent('#doctor-page');
doctorPage.onPullDownRefresh();
} else {
wx.stopPullDownRefresh();
}
},##https://www.jianshu.com/p/1cfc074eeb75iconfont.cn にログインし、zip パッケージをダウンロードします
で .ttf ファイルを解凍します。base64 形式に変換します。
新しく作成した iconfont.wxss に style.css を書き込みます。上記のフォント ファイル パスを置き換えます。変換したばかりの Base64 を使用して
1. リストの親要素にイベントをバインドします ] 以上が小さなプログラムの開発で遭遇するいくつかの問題を要約して共有します (落とし穴を避けるために)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<view
class="list-container"
wx:for="{{doctorList.list}}"
wx:key="{{index}}"
>
<view
bindtouchstart='onTouchStartListItem'
bindtouchmove='onTouchMoveListItem'
style="{{item.txtStyle}}"
>滑动的内容
</view>
<view class="backCover">滑动后显示的按钮</view>
</view>.list-container{
position: relative;
width:100%;
height: 224rpx;
overflow: hidden;
}
.list-item{
position: absolute;
left: 0;
z-index: 5;
transition: left 0.2s ease-in-out;
background-color: #fff;
}
.backCover{
box-sizing: border-box;
width: 200rpx;
height: 218rpx;
position: absolute;
right: 0;
top: 0;
z-index: 4;
}onTouchStartListItem: function (e) {
// 是单指触碰
if (e.touches.length === 1) {
// 记下触碰点距屏幕边缘的x轴位置
this.setData({
startX: e.touches[0].clientX,
})
}
},
onTouchMoveListItem: function (e) {
var that = this
if (e.touches.length == 1) {
var disX = that.data.startX - e.touches[0].clientX;
var deleteBtnWidth = that.data.deleteBtnWidth;
var txtStyle = "";
if (disX < deleteBtnWidth / 4) {
txtStyle = "left:0rpx";
} else {
txtStyle = "left:-" + deleteBtnWidth + "rpx";
}
var index = e.currentTarget.id
var list = that.data.doctorList.list
list[index].txtStyle = txtStyle;
that.setData({
doctorList: {
list: list,
total: that.data.doctorList.total
}
})
}
},
onTouchEndListItem: function (e) {
var that = this
if (e.changedTouches.length == 1) {
var endX = e.changedTouches[0].clientX;
var disX = that.data.startX - endX;
var deleteBtnWidth = that.data.deleteBtnWidth;
var txtStyle = disX > deleteBtnWidth / 2 ? "left:-" + deleteBtnWidth + "px" : "left:0px";
var index = e.currentTarget.id
var list = that.data.doctorList.list
list[index].txtStyle = txtStyle;
that.setData({
doctorList: {
list: list,
total: that.data.doctorList.total
}
});
}
},
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
