ホームページ  >  記事  >  WeChat アプレット  >  ポップアップメニュー機能を作成するミニプログラム開発(コード付き)

ポップアップメニュー機能を作成するミニプログラム開発(コード付き)

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-13 13:47:203781ブラウズ

今回は、小さなプログラムでポップアップメニュー関数を開発する方法(コード付き)をお届けします。 小さなプログラムでポップアップメニュー関数を開発する場合の注意点は何ですか?見てください

要件

タブバーボタンをクリックしてメニューをポップアップし、もう一度クリックしてメニューを閉じます

解決すべき問題

  1. タブバー3 - 列スタイル、タブ バーは固定です。

  2. タブ バーをクリックしてメニューをポップアップすると、透明なマスクが表示されます

  3. マスクの優先順位はポップアップ ボックスの下にあります。ポップアップ ボックスのラベルの設定

  4. スクロール バーを非表示にする

  5. 解決方法

柔軟なレイアウト、3 つの均等に分割された列。 状態監視クリックイベント、データコントロールの非表示または表示、RGBA による透明度の設定

  1. ポップアップボックス Z インデックスの設定

  2. 水平方向の配置がコントロールの間隔を超えた後の柔軟なレイアウトのフレックスラップ

  3. ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    }
  4. 具体的な実装
  5. wxml
  6. <import src="../../templates/template" />
    <view class="container {{isMask?&#39;mask&#39;:&#39;&#39;}}">
      <view class="header">
        <view class="filterCity {{status==&#39;1&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;1&#39; bindtap="changeStatus">
          <view class="city">城市筛选</view>
          <image src="{{status==&#39;1&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
        </view>
        <view class="filterJob {{status==&#39;2&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;2&#39; bindtap="changeStatus">
          <view class="job">职位筛选</view>
          <image src="{{status==&#39;2&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
        </view>
        <view class="filterOrder {{status==&#39;3&#39;&& isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;3&#39; bindtap="changeStatus">
          <view class="order">排序方式</view>
          <image src="{{status==&#39;3&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
        </view>
      </view>
      <block wx:if="{{isActive==true&&status==&#39;1&#39;}}">
        <view class="cityContainer">
          <block wx:for="{{city}}" wx:key="id" wx:for-index="index">
            <view class="city {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-index="{{index}}" bindtap="select">{{item}}</view>
          </block>
        </view>
      </block>
      <block wx:if="{{isActive==true&&status==&#39;2&#39;}}">
        <scroll-view scroll-y="true" class="posContainer">
          <block wx:for="{{cur}}" data-index=&#39;index&#39; wx:for-index=&#39;index&#39; wx:key="index">
            <view class="title">{{item.title}}</view>
            <view class="poscontent">
              <view wx:for="{{item.types}}" wx:for-item="type" wx:key=&#39;id&#39; wx:for-index="{{index}}" data-index="{{index}}">
                <view class="tag {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-id="{{id}}" bindtap="multiSelect">{{type}}</view>
              </view>
            </view>
          </block>
          <view class="confirm">
            <button class="weui-btn" type="warn">确认</button>
          </view>
        </scroll-view>
      </block>
      <block wx:if="{{isActive==true&&status==&#39;3&#39;}}">
        <view class="orderContainer">
          <view class="block">智能排序</view>
          <view class="block">时间排序</view>
          <view class="block">薪资排序</view>
        </view>
      </block>
      <view class="listContainer" >
        <view wx:for="{{jobList}}" wx:key="index" data-index="{{index}}">
          <template is="list-item" data="{{...item}}" />
        </view>
      </view>
      <view class="search " bindtap="search">
        <image src="../../youzan-image/search.png" />
        <text>搜索</text>
      </view>
    </view>
wxss

page {
  position: relative;
  width: 100%;
  height: 100vh;
}
.header {
  width: 100%;
  height: 80rpx;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  color: #313131;
  font-size: 16px;
  border-bottom: 1rpx solid #eeeeee;
  z-index: 9999;
  background-color: #fff;
}
.filterCity {
  flex: 1;
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
}
.filterJob {
  position: relative;
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
}
.filterOrder {
  position: relative;
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
}
.header image {
  position: absolute;
  right: 15rpx;
  top: 26rpx;
  width: 30rpx;
  height: 30rpx;
}
.active {
  color: #ef0001;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80rpx;
  background-color: rgba(15, 15, 26, 0.3);
}
.cityContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 300rpx;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e9e9e9;
  padding-bottom: 130rpx;
}
.cityContainer .city {
  display: block;
  font-size: 15px;
  margin-top: 100rpx;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
  overflow: hidden;
}
.select {
  color: #ffffff;
  background-color: #ed0000;
}
.posContainer {
  height: 980rpx;
  width: 100%;
  background-color: #fff;
  /* overflow:auto; */
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.title {
  margin-top: 55rpx;
  font-size: 15px;
  margin-left: 28rpx;
}
.poscontent {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: -15rpx;
}
.tag {
  margin-left: 28rpx;
  margin-top: 23rpx;
  font-size: 13px;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
}
.confirm {
  width: 100%;
  height: 150rpx;
  border: 1rpx solid transparent;
  background-color: #fff;
}
.weui-btn {
  position: fixed;
  width: 95%;
  bottom: 52rpx;
  left: 50%;
  transform: translateX(-50%);
}
.orderContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  width: 100%;
  height: 125rpx;
}
.block {
  font-size: 13px;
  width: 200rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
}
.search {
  position: fixed;
  bottom: 80rpx;
  background-color: #fff;
  right: 25rpx;
  width: 150rpx;
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
  border-radius: 35rpx;
  box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5;
}
.search image {
  width: 30rpx;
  height: 30rpx;
}
.search text {
  font-size: 15px;
  padding-left: 9rpx;
  color: #666666;
}
.listContainer {
  width: 100%;
  height: 100%;
  margin-top: 80rpx;
}
js
import category from '../../api/employ'
import jobList from '../../api/detail'
Page({
 data: {
  curIndex: '',
  isActive: false,
  jobList:[],
  cur: [],
  job: [],
  isShow: true,
  status: 0,
  isMask: false,
  isSelect: false,
  city: ['全国', '杭州', '北京', '深圳', '上海', '广州', '武汉', '重庆']
 },
 changeStatus(e) {
  let status = e.currentTarget.dataset.status;
  let cur = category;
  this.setData({
   isActive: !this.data.isActive,
   status: status,
   isMask: !this.data.isMask,
   cur: cur,
  })
 },
 select(e) {
  let curIndex = e.currentTarget.dataset.index;
  this.setData({
   isSelect: " curIndex == this.data.curIndex ? '!this.data.isActive' : 'true' ",
   isActive: false,
   isMask:false,
   curIndex: curIndex,
  })
 },
 multiSelect(e){
  let multiIndex=e.currentTarget.dataset.index;
  this.setData({
   isSelect:!this.data.isSelect,
   curIndex:multiIndex
  })
 },
 search(e) {
  wx.navigateTo({
   url: '../search/search',
  })
 },
 onLoad: function (e) {
  this.setData({
   jobList:jobList
  })
 },
 click:function (e) {
  let id =e.currentTarget.dataset.id;
  wx.navigateTo({
   url: `../detail/detail?id=${id}`,
  })
 }
})
信じて見てください この記事の事例を読んだ後は、その方法をマスターしたことになります。 PHP 中国語 Web サイトの他の関連記事!

以上がポップアップメニュー機能を作成するミニプログラム開発(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。