123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <view class="u-page">
- <u-navbar
- title="上拉菜单"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-cell-group>
- <u-cell
- @click="openSheet(index)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </u-cell-group>
- <u-action-sheet
- :show="show0"
- @close="close"
- @select="select"
- :actions="actions0"
- :closeOnClickOverlay="false"
- >
- </u-action-sheet>
- <u-action-sheet
- :show="show1"
- @close="show1 = false"
- :actions="actions1"
- >
- </u-action-sheet>
- <u-action-sheet
- :show="show2"
- @close="show2 = false"
- :actions="actions2"
- cancelText="取消"
- >
- </u-action-sheet>
- <u-action-sheet
- :show="show3"
- @close="show3 = false"
- :actions="actions3"
- description="这是一段描述文本,字号偏小,颜色偏淡"
- >
- </u-action-sheet>
- <u-action-sheet
- :show="show4"
- @close="show4 = false"
- title="标题位置"
- :round="10"
- >
- <text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text>
- </u-action-sheet>
- <u-action-sheet
- :show="show5"
- @close="show5 = false"
- title="微信开放能力"
- :actions="actions5"
- @getuserinfo="getuserinfo"
- ></u-action-sheet>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- show0: false,
- show1: false,
- show2: false,
- show3: false,
- show4: false,
- show5: false,
- actions0: [{
- name: '选项1',
- },
- {
- name: '选项2',
- },
- {
- name: '选项3',
- subname: '描述文本'
- },
- ],
- actions1: [{
- name: '选项1',
- },
- {
- loading: true
- },
- {
- name: '选项被禁用',
- disabled: true
- },
- ],
- actions2: [{
- name: '选项1',
- },
- {
- name: '选项2',
- },
- {
- name: '选项3',
- },
- ],
- actions3: [{
- name: '选项1',
- },
- {
- name: '选项2',
- },
- {
- name: '选项3',
- },
- ],
- actions5: [{
- name: '获取用户信息',
- openType: 'getUserInfo',
- color: uni.$u.color['success']
- }],
- list: [{
- title: '普通使用',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png'
- },
- {
- title: '设置状态',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png'
- },
- {
- title: '显示取消按钮',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
- },
- {
- title: '描述内容',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png'
- },
- {
- title: '显示标题(显示圆角)',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png'
- },
- {
- title: '微信开放能力',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
- }
- ]
- }
- },
- onLoad() {
- },
- methods: {
- // 点击cell,判断显示哪个功能
- openSheet(index) {
- // #ifndef MP
- if (index === 5) return uni.$u.toast('请在微信内预览')
- // #endif
- this[`show${index}`] = true
- },
- getuserinfo(res) {
- uni.$u.toast(`用户名:${res.userInfo.nickName}`)
- },
- navigateBack() {
- uni.navigateBack()
- },
- close() {
- console.log('close');
- this['show0'] = false
- },
- select(e) {
- console.log('select', e);
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- </style>
|